yanghyo
09-22
퍼블리싱 세팅
@08c99f1d6493abf742d7a5e9a19414375acb0bfb
+++ html/index.html
... | ... | @@ -0,0 +1,571 @@ |
| 1 | +<html> | |
| 2 | + | |
| 3 | +<head> | |
| 4 | + <title>publish list</title> | |
| 5 | + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| 6 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 7 | + <style> | |
| 8 | + body { | |
| 9 | + padding: 0; | |
| 10 | + margin: 0; | |
| 11 | + overflow-y: scroll; | |
| 12 | + font: 11px/1.2em "나눔고딕", NanumGothic, "맑은 고딕", "Malgun Gothic", Apple Gothic, "돋움", Dotum, "굴림", Gulim, sans-serif; | |
| 13 | + } | |
| 14 | + | |
| 15 | + h1, | |
| 16 | + h2 { | |
| 17 | + margin: 5px; | |
| 18 | + font-family: tahoma, sans-serif; | |
| 19 | + font-size: 16px; | |
| 20 | + font-weight: bold; | |
| 21 | + text-transform: capitalize; | |
| 22 | + /*capitalize | uppercase | lowercase | none*/ | |
| 23 | + } | |
| 24 | + | |
| 25 | + h2 { | |
| 26 | + font-size: 12px; | |
| 27 | + } | |
| 28 | + | |
| 29 | + a { | |
| 30 | + text-decoration: none; | |
| 31 | + color: #aaa; | |
| 32 | + } | |
| 33 | + | |
| 34 | + a.newWin { | |
| 35 | + width: 6px; | |
| 36 | + height: 6px; | |
| 37 | + display: inline-block; | |
| 38 | + text-indent: -9999px; | |
| 39 | + border: 1px solid #777; | |
| 40 | + margin: 0 5px; | |
| 41 | + vertical-align: middle; | |
| 42 | + position: relative; | |
| 43 | + } | |
| 44 | + | |
| 45 | + a.newWin:before { | |
| 46 | + content: ''; | |
| 47 | + width: 6px; | |
| 48 | + height: 6px; | |
| 49 | + position: absolute; | |
| 50 | + left: 1px; | |
| 51 | + bottom: 1px; | |
| 52 | + border: 1px solid #777; | |
| 53 | + background: #fff; | |
| 54 | + } | |
| 55 | + | |
| 56 | + h1 a { | |
| 57 | + color: #000; | |
| 58 | + } | |
| 59 | + | |
| 60 | + ul, | |
| 61 | + li { | |
| 62 | + margin: 0; | |
| 63 | + padding: 0; | |
| 64 | + list-style: none; | |
| 65 | + } | |
| 66 | + | |
| 67 | + body>ul { | |
| 68 | + border-bottom: 1px #555 solid; | |
| 69 | + display: none; | |
| 70 | + } | |
| 71 | + | |
| 72 | + li { | |
| 73 | + display: block; | |
| 74 | + padding: 8px 0 0 0; | |
| 75 | + background-repeat: no-repeat; | |
| 76 | + position: relative; | |
| 77 | + } | |
| 78 | + | |
| 79 | + li a:hover { | |
| 80 | + text-decoration: underline; | |
| 81 | + } | |
| 82 | + | |
| 83 | + li:before { | |
| 84 | + content: ''; | |
| 85 | + position: absolute; | |
| 86 | + width: 2px; | |
| 87 | + height: 2px; | |
| 88 | + background: #555; | |
| 89 | + top: 13px; | |
| 90 | + } | |
| 91 | + | |
| 92 | + li span { | |
| 93 | + display: block; | |
| 94 | + color: #888; | |
| 95 | + margin-top: -5px; | |
| 96 | + padding-bottom: 8px; | |
| 97 | + font-size: 10px; | |
| 98 | + } | |
| 99 | + | |
| 100 | + li { | |
| 101 | + background-color: #aaa; | |
| 102 | + border-top: 1px #555 solid; | |
| 103 | + } | |
| 104 | + | |
| 105 | + li li { | |
| 106 | + background-color: #ddd; | |
| 107 | + border-top: 1px #777 dotted; | |
| 108 | + } | |
| 109 | + | |
| 110 | + li li li { | |
| 111 | + background-color: #e9e9e9; | |
| 112 | + border-top: 1px #999 dotted; | |
| 113 | + } | |
| 114 | + | |
| 115 | + li li li li { | |
| 116 | + background-color: #eee; | |
| 117 | + border-top: 1px #bbb dotted; | |
| 118 | + } | |
| 119 | + | |
| 120 | + li li li li li { | |
| 121 | + background-color: #f3f3f3; | |
| 122 | + border-top: 1px #ddd dotted; | |
| 123 | + } | |
| 124 | + | |
| 125 | + li li li li li li { | |
| 126 | + background-color: #fff; | |
| 127 | + border-top: 1px #eee dotted; | |
| 128 | + } | |
| 129 | + | |
| 130 | + li:before { | |
| 131 | + left: 10px; | |
| 132 | + } | |
| 133 | + | |
| 134 | + li li:before { | |
| 135 | + left: 20px; | |
| 136 | + } | |
| 137 | + | |
| 138 | + li li li:before { | |
| 139 | + left: 30px; | |
| 140 | + } | |
| 141 | + | |
| 142 | + li li li li:before { | |
| 143 | + left: 40px; | |
| 144 | + } | |
| 145 | + | |
| 146 | + li li li li li:before { | |
| 147 | + left: 50px; | |
| 148 | + } | |
| 149 | + | |
| 150 | + li li li li li li:before { | |
| 151 | + left: 60px; | |
| 152 | + } | |
| 153 | + | |
| 154 | + li a { | |
| 155 | + margin-bottom: 8px; | |
| 156 | + display: inline-block; | |
| 157 | + } | |
| 158 | + | |
| 159 | + li span, | |
| 160 | + li a { | |
| 161 | + margin-left: 15px; | |
| 162 | + } | |
| 163 | + | |
| 164 | + li li span, | |
| 165 | + li li a { | |
| 166 | + margin-left: 25px; | |
| 167 | + } | |
| 168 | + | |
| 169 | + li li li span, | |
| 170 | + li li li a { | |
| 171 | + margin-left: 35px; | |
| 172 | + } | |
| 173 | + | |
| 174 | + li li li li span, | |
| 175 | + li li li li a { | |
| 176 | + margin-left: 45px; | |
| 177 | + } | |
| 178 | + | |
| 179 | + li li li li li span, | |
| 180 | + li li li li li a { | |
| 181 | + margin-left: 55px; | |
| 182 | + } | |
| 183 | + | |
| 184 | + li li li li li li span, | |
| 185 | + li li li li li li a { | |
| 186 | + margin-left: 65px; | |
| 187 | + } | |
| 188 | + | |
| 189 | + li.on:after, | |
| 190 | + li.off:after { | |
| 191 | + content: ''; | |
| 192 | + position: absolute; | |
| 193 | + right: 10px; | |
| 194 | + top: 8px; | |
| 195 | + font-size: 14px; | |
| 196 | + width: 10px; | |
| 197 | + text-align: center; | |
| 198 | + } | |
| 199 | + | |
| 200 | + li.on:after { | |
| 201 | + content: '+' | |
| 202 | + } | |
| 203 | + | |
| 204 | + li.off:after { | |
| 205 | + content: '-' | |
| 206 | + } | |
| 207 | + | |
| 208 | + li.off ul { | |
| 209 | + display: none; | |
| 210 | + } | |
| 211 | + | |
| 212 | + .ready, | |
| 213 | + .ready a { | |
| 214 | + color: #000; | |
| 215 | + } | |
| 216 | + | |
| 217 | + .mod, | |
| 218 | + .mod a { | |
| 219 | + color: red; | |
| 220 | + } | |
| 221 | + | |
| 222 | + .design, | |
| 223 | + .design a { | |
| 224 | + color: pink; | |
| 225 | + } | |
| 226 | + | |
| 227 | + .working, | |
| 228 | + .working a { | |
| 229 | + color: blue; | |
| 230 | + } | |
| 231 | + | |
| 232 | + .add, | |
| 233 | + .add a { | |
| 234 | + color: green; | |
| 235 | + } | |
| 236 | + | |
| 237 | + .temp, | |
| 238 | + li.temp a { | |
| 239 | + color: #ff6600; | |
| 240 | + } | |
| 241 | + | |
| 242 | + .before, | |
| 243 | + .before a { | |
| 244 | + color: #aaa; | |
| 245 | + } | |
| 246 | + | |
| 247 | + .x, | |
| 248 | + .x a { | |
| 249 | + color: #aaa; | |
| 250 | + cursor: default; | |
| 251 | + text-decoration: line-through; | |
| 252 | + } | |
| 253 | + | |
| 254 | + .guide { | |
| 255 | + display: block; | |
| 256 | + margin: 10px; | |
| 257 | + font-size: 11px; | |
| 258 | + } | |
| 259 | + | |
| 260 | + .guide span { | |
| 261 | + line-height: 1.5em; | |
| 262 | + } | |
| 263 | + | |
| 264 | + li time { | |
| 265 | + color: #555; | |
| 266 | + } | |
| 267 | + | |
| 268 | + li.highlight { | |
| 269 | + background-color: #ffffaa | |
| 270 | + } | |
| 271 | + | |
| 272 | + li.highlight li { | |
| 273 | + /* background-color: #ffffee */ | |
| 274 | + } | |
| 275 | + | |
| 276 | + .pubList { | |
| 277 | + float: left; | |
| 278 | + width: 320px; | |
| 279 | + height: 100vh; | |
| 280 | + overflow-y: scroll; | |
| 281 | + } | |
| 282 | + | |
| 283 | + .iframe-wrap { | |
| 284 | + float: right; | |
| 285 | + width: calc(100% - 320px); | |
| 286 | + padding: 0; | |
| 287 | + } | |
| 288 | + | |
| 289 | + .iframe-wrap iframe { | |
| 290 | + width: 100%; | |
| 291 | + border: 0; | |
| 292 | + margin: 0; | |
| 293 | + padding: 0; | |
| 294 | + height: 100vh; | |
| 295 | + overflow: auto; | |
| 296 | + } | |
| 297 | + | |
| 298 | + .cb { | |
| 299 | + clear: both; | |
| 300 | + } | |
| 301 | + | |
| 302 | + /********design : 디자인 요청, mod : 변경, ready : 작업완료, temp : 임시파일, x : 삭제대상 ********/ | |
| 303 | + </style> | |
| 304 | + <script> | |
| 305 | + window.onload = function () { | |
| 306 | + var body = document.body; | |
| 307 | + var obj = body.getElementsByTagName("ul")[0]; | |
| 308 | + obj.style.display = "block"; | |
| 309 | + writeLink(obj.getElementsByTagName("li")); | |
| 310 | + } | |
| 311 | + | |
| 312 | + function writeLink(obj) { | |
| 313 | + for (var i = 0; i < obj.length; i++) { | |
| 314 | + var nm, lk, sp, date, dateArr; | |
| 315 | + if (obj[i].innerHTML.split("<")[0].search(",") != -1) { | |
| 316 | + nm = obj[i].innerHTML.split(",")[0]; | |
| 317 | + lk = obj[i].innerHTML.split(",")[1].split("<")[0]; | |
| 318 | + if (obj[i].innerHTML.split(",").length > 2) { | |
| 319 | + date = obj[i].innerHTML.split(",").slice(obj[i].innerHTML.split(",").length - 1, obj[i].innerHTML.split(",").length).join(); | |
| 320 | + dateArr = obj[i].innerHTML.split(",").slice(2, obj[i].innerHTML.split(",").length).join(); | |
| 321 | + sp = nm + "," + lk + "," + obj[i].innerHTML.split(",").slice(2, obj[i].innerHTML.split(",").length).join(); | |
| 322 | + } else { | |
| 323 | + date = ""; | |
| 324 | + sp = nm + "," + lk; | |
| 325 | + } | |
| 326 | + lk = lk; | |
| 327 | + } else { | |
| 328 | + nm = obj[i].innerHTML.split("<")[0]; | |
| 329 | + lk = "#none" | |
| 330 | + sp = nm; | |
| 331 | + } | |
| 332 | + var child = obj[i].innerHTML.split(sp)[1]; | |
| 333 | + | |
| 334 | + if (lk == "javascript:;" || lk == "#none") { | |
| 335 | + obj[i].innerHTML = "<a href='" + lk + "' onclick='fncHighlight(this);'>" + nm + "</a>" + child; | |
| 336 | + } else { | |
| 337 | + obj[i].innerHTML = "<a href='" + lk + "' target='pubView' onclick='fncHighlight(this);'>" + nm + "</a>" + "<a href='" + lk + "' class='newWin' target='preview' title='open new window' onclick='fncHighlight(this);'>new window</a>" + "<time title='" + dateArr + "'>" + date + "</time>" + "<span>" + lk + "</span>" + child; | |
| 338 | + } | |
| 339 | + | |
| 340 | + if (child !== "") { | |
| 341 | + var link = obj[i].getElementsByTagName("a")[0]; | |
| 342 | + link.addEventListener('click', switchOnOff, false); | |
| 343 | + | |
| 344 | + var li = obj[i]; | |
| 345 | + if (!li.classList.contains('off')) { | |
| 346 | + li.classList.add('on'); | |
| 347 | + } | |
| 348 | + } | |
| 349 | + } | |
| 350 | + } | |
| 351 | + | |
| 352 | + function switchOnOff(event) { | |
| 353 | + var target = event.target; | |
| 354 | + var parent = target.closest('li'); | |
| 355 | + if (parent.classList.contains('on')) { | |
| 356 | + parent.classList.add('off'); | |
| 357 | + parent.classList.remove('on'); | |
| 358 | + } else { | |
| 359 | + parent.classList.add('on'); | |
| 360 | + parent.classList.remove('off'); | |
| 361 | + } | |
| 362 | + } | |
| 363 | + | |
| 364 | + function switchOnOffAll(event) { | |
| 365 | + var target = event.target; | |
| 366 | + if (target.innerHTML.indexOf("펼치기") !== -1) { | |
| 367 | + target.innerHTML = target.innerHTML.replace("펼치기", "닫기"); | |
| 368 | + var offItems = document.querySelectorAll('.off'); | |
| 369 | + offItems.forEach(function (item) { | |
| 370 | + item.classList.remove('off'); | |
| 371 | + item.classList.add('on'); | |
| 372 | + }); | |
| 373 | + } else { | |
| 374 | + target.innerHTML = target.innerHTML.replace("닫기", "펼치기"); | |
| 375 | + var onItems = document.querySelectorAll('.on'); | |
| 376 | + onItems.forEach(function (item) { | |
| 377 | + item.classList.remove('on'); | |
| 378 | + item.classList.add('off'); | |
| 379 | + }); | |
| 380 | + } | |
| 381 | + } | |
| 382 | + | |
| 383 | + function fncHighlight(obj) { | |
| 384 | + var highlighted = document.querySelectorAll('.highlight'); | |
| 385 | + highlighted.forEach(function (item) { | |
| 386 | + item.classList.remove('highlight'); | |
| 387 | + }); | |
| 388 | + var closestLi = obj.closest('li'); | |
| 389 | + closestLi.classList.add('highlight'); | |
| 390 | + } | |
| 391 | + </script> | |
| 392 | +</head> | |
| 393 | + | |
| 394 | +<body> | |
| 395 | + <div class="pubList"> | |
| 396 | + <h1><a href="index.html" target="_parent">publish list</a></h1> | |
| 397 | + <h2>publish</h2> | |
| 398 | + | |
| 399 | + <div class="guide"> | |
| 400 | + <span class="ready">■ 검은색 - 퍼블리싱 완료</span><br> | |
| 401 | + <span class="before">■ 회색 - 작업전</span><br> | |
| 402 | + <span class="working">■ 파란색 - 작업중</span><br> | |
| 403 | + <span class="design">■ 분홍색 - 디자인 요청</span><br> | |
| 404 | + <span class="mod">■ 빨간색 - 변경된 파일</span><br> | |
| 405 | + <span class="add">■ 초록색 - 추가</span><br><br> | |
| 406 | + <span class="x">■ 작업안함</span><br><br> | |
| 407 | + <a href="#none" title="전체 목록 토글" onclick="switchOnOffAll(event);">전체 펼치기</a> | |
| 408 | + </div> | |
| 409 | + <ul class="ready"> | |
| 410 | + <li> | |
| 411 | + Guide | |
| 412 | + <ul> | |
| 413 | + <li>Guide,guide/guide.html</li> | |
| 414 | + <!-- <li>Error,guide/error.html</li> | |
| 415 | + <li>loading,guide/loading.html</li> --> | |
| 416 | + <li class="add">sub,sub/sub.html</li> | |
| 417 | + </ul> | |
| 418 | + </li> | |
| 419 | + <li> | |
| 420 | + 메인 | |
| 421 | + <ul> | |
| 422 | + <li>메인,main/main.html</li> | |
| 423 | + <li>[고도화][팝업]클래스소개,main/pop_classInfo.html</li> | |
| 424 | + <li>[팝업]학생계정관리,main/pop_account.html</li> | |
| 425 | + <li>[팝업]자주찾는서비스,main/pop_personalService.html</li> | |
| 426 | + <li>[팝업]포탈 테마,main/pop_personalTheme.html</li> | |
| 427 | + <li>[팝업]채움책방접속,main/pop_book.html,2025-07-24</li> | |
| 428 | + <li>gate,main/gate.html</li> | |
| 429 | + </ul> | |
| 430 | + </li> | |
| 431 | + <li class="add"> | |
| 432 | + member | |
| 433 | + <ul> | |
| 434 | + <li> | |
| 435 | + 로그인 | |
| 436 | + <ul> | |
| 437 | + <li>로그인,login/login.html</li> | |
| 438 | + <li>로그인 안내,login/login_Info.html</li> | |
| 439 | + <li>아이디찾기,login/idFind.html</li> | |
| 440 | + <li>[팝업]아이디찾기결과,login/pop_id.html</li> | |
| 441 | + <li>비밀번호찾기,login/pwFind.html</li> | |
| 442 | + <li>[팝업]비밀번호 변경,login/pop_pw.html</li> | |
| 443 | + <li>[팝업]가입계정안내,login/pop_idInfo.html</li> | |
| 444 | + <!-- <li>[팝업]원패스가입정보입력,login/pop_onepassInfo.html,2024-11-26</li> --> | |
| 445 | + </ul> | |
| 446 | + </li> | |
| 447 | + <li> | |
| 448 | + 회원가입 | |
| 449 | + <ul> | |
| 450 | + <li>로그인 타입,join/loginType.html</li> | |
| 451 | + <li>회원가입 타입,join/joinType.html</li> | |
| 452 | + <li class="add">회원가입,join/join.html</li> | |
| 453 | + <li> | |
| 454 | + 선생님회원가입 | |
| 455 | + <ul> | |
| 456 | + <li>선생님 회원가입1,join/join1_teacher.html</li> | |
| 457 | + <li>선생님 회원가입2,join/join2_teacher.html</li> | |
| 458 | + </ul> | |
| 459 | + </li> | |
| 460 | + <li> | |
| 461 | + 학생회원가입 | |
| 462 | + <ul> | |
| 463 | + <li>학생 회원가입1,join/join1_student.html</li> | |
| 464 | + <li>학생 회원가입 임시코드,join/join1_1student.html</li> | |
| 465 | + <li>학생 회원가입2,join/join2_student.html</li> | |
| 466 | + </ul> | |
| 467 | + </li> | |
| 468 | + <li>부모회원가입 | |
| 469 | + <ul> | |
| 470 | + <li>부모 회원가입2,join/join2_parent.html</li> | |
| 471 | + </ul> | |
| 472 | + </li> | |
| 473 | + <!-- <li>약관페이지 합침페이지,join/join_terms_complete.html</li> | |
| 474 | + <li>약관페이지,join/terms.html</li> | |
| 475 | + <li>개인정보동의페이지,join/infoCollection.html</li> | |
| 476 | + <li>개인정보동의페이지250415,join/infoCollection250415.html</li> | |
| 477 | + <li>개인정보3자동의페이지,join/infoShare.html</li> --> | |
| 478 | + <li>[팝업]이메일인증,join/pop_email.html</li> | |
| 479 | + <li>[이메일]이메일,join/email.html</li> | |
| 480 | + <li>[팝업]회원가입완료,join/pop_joinEnd.html</li> | |
| 481 | + <!-- <li>개인정보동의페이지,join/infoCollection_new.html</li> | |
| 482 | + <li>연계사이트,join/serviceInfo.html</li> --> | |
| 483 | + <li>학생 관리,join/studentManage.html</li> | |
| 484 | + <li>학부모 관리,join/parentsManage.html</li> | |
| 485 | + <li>[팝업]회원탈퇴,join/joinType.html</li> | |
| 486 | + </ul> | |
| 487 | + </li> | |
| 488 | + <li> | |
| 489 | + 프로필 | |
| 490 | + <ul> | |
| 491 | + <li>마이페이지,profile/mypage.html</li> | |
| 492 | + <li>담임 승인 이력,profile/profile_confirmTeacher.html</li> | |
| 493 | + <li>새학기 학적정보 변경,profile/profile_chgClassInfo.html</li> | |
| 494 | + <li>프로필,profile/profile.html</li> | |
| 495 | + <li>프로필_학부모,profile/profile_parent.html</li> | |
| 496 | + <li>학생프로필,profile/profile_student.html</li> | |
| 497 | + <li>[팝업]자녀찾기,profile/pop_childFind.html</li> | |
| 498 | + <li>비밀번호 재설정,profile/pop_pwReset.html</li> | |
| 499 | + </ul> | |
| 500 | + </li> | |
| 501 | + <li> | |
| 502 | + 유틸리티 | |
| 503 | + <ul> | |
| 504 | + <li>교권보호,util/protectTea.html</li> | |
| 505 | + <li> | |
| 506 | + 가정통신문 | |
| 507 | + <ul> | |
| 508 | + <li>가정통신문,util/agendar.html</li> | |
| 509 | + <li>가정통신문 작성,util/agendarWrite.html</li> | |
| 510 | + <li>[새창]가정통신문 상세,util/popWin_agendarView.html</li> | |
| 511 | + </ul> | |
| 512 | + </li> | |
| 513 | + </ul> | |
| 514 | + </li> | |
| 515 | + <li> | |
| 516 | + 기타 | |
| 517 | + <ul> | |
| 518 | + <li>개인정보 처리방침, member/infoCollection.html</li> | |
| 519 | + <li>이전 개인정보 처리방침 목록, member/privacyPrev.html</li> | |
| 520 | + <li>이용약관, member/terms.html</li> | |
| 521 | + <li>이용가능 서비스, member/serviceInfo.html</li> | |
| 522 | + </ul> | |
| 523 | + </li> | |
| 524 | + </ul> | |
| 525 | + </li> | |
| 526 | + <li> | |
| 527 | + sub | |
| 528 | + <ul> | |
| 529 | + <li>공지사항,sub/notice.html</li> | |
| 530 | + <li>공지사항상세,sub/noticeView.html</li> | |
| 531 | + <li>문의게시판,sub/inquiry.html</li> | |
| 532 | + <li>문의작성,sub/inquiryWrite.html</li> | |
| 533 | + <li>문의상세,sub/inquiryView.html</li> | |
| 534 | + <li>교권보호,sub/protectTea.html</li> | |
| 535 | + <li>FAQ,sub/faq.html</li> | |
| 536 | + <li>매뉴얼,sub/manual.html</li> | |
| 537 | + <li>[새창]설문상세,sub/surveyView_popWin.html</li> | |
| 538 | + </ul> | |
| 539 | + </li> | |
| 540 | + <li> | |
| 541 | + 채움책방 | |
| 542 | + <ul> | |
| 543 | + <li>채움책방,bookclub/bookclub.html</li> | |
| 544 | + <li>독서현황 상세,bookclub/bookStateView.html</li> | |
| 545 | + <li>독서현황 상세_학생,bookclub/bookStateView_stu.html</li> | |
| 546 | + <li>독서 기록하기,bookclub/bookRecoWrite.html</li> | |
| 547 | + <li>책 추천하기,bookclub/bookWrite.html</li> | |
| 548 | + <li>[팝업]책 찾기,bookclub/pop_bookFind.html</li> | |
| 549 | + </ul> | |
| 550 | + </li> | |
| 551 | + <li> | |
| 552 | + 채움더하기 | |
| 553 | + <ul> | |
| 554 | + <li>채움더하기 소개,plus/plusIntro.html</li> | |
| 555 | + </ul> | |
| 556 | + </li> | |
| 557 | + <li> | |
| 558 | + 이벤트 | |
| 559 | + <ul> | |
| 560 | + <li>가로세로,event/crossword/crossword.html</li> | |
| 561 | + </ul> | |
| 562 | + </li> | |
| 563 | + </ul> | |
| 564 | + </div> | |
| 565 | + <div class="iframe-wrap"> | |
| 566 | + <iframe id="pubView" name="pubView"></iframe> | |
| 567 | + </div> | |
| 568 | + <div class="cb"></div> | |
| 569 | +</body> | |
| 570 | + | |
| 571 | +</html>(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/abstracts/_mixins.scss
... | ... | @@ -0,0 +1,351 @@ |
| 1 | +:root { | |
| 2 | + --font-heading-lg: 5.6rem; | |
| 3 | + --font-heading-md: var(--size-font-4xlg); | |
| 4 | + --font-heading-sm: var(--size-font-3xlg); | |
| 5 | + | |
| 6 | + --font-tit-xlg: var(--size-font-3xlg); | |
| 7 | + --font-tit-lg: var(--size-font-2xlg); | |
| 8 | + --font-tit-md: var(--size-font-lg); | |
| 9 | + --font-tit-sm: var(--size-font-md); | |
| 10 | + --font-tit-xsm: var(--size-font-sm); | |
| 11 | + | |
| 12 | + --font-body-lg : var(--size-font-md); | |
| 13 | + --font-body-md: var(--size-font-sm); | |
| 14 | + --font-body-sm: var(--size-font-xsm); | |
| 15 | + --font-body-xsm: var(--size-font-2xsm); | |
| 16 | + | |
| 17 | + --font-label-lg: var(--size-font-md); | |
| 18 | + --font-label-md: var(--size-font-sm); | |
| 19 | + --font-label-sm: var(--size-font-xsm); | |
| 20 | + --font-label-xsm: var(--size-font-2xsm); | |
| 21 | + | |
| 22 | + --font-tit-label: var(--size-font-sm); | |
| 23 | +} | |
| 24 | +@mixin typo($cls, $weight: null) { | |
| 25 | + $font-map: ( | |
| 26 | + 'heading-lg': (font-size: var(--font-heading-lg), font-weight: $size-font-weight-xlg, line-height: $size-font-lineheight-sm), | |
| 27 | + 'heading-md': (font-size: var(--font-heading-md), font-weight: $size-font-weight-xlg, line-height: $size-font-lineheight-sm), | |
| 28 | + 'heading-sm': (font-size: var(--font-heading-sm), font-weight: $size-font-weight-xlg, line-height: $size-font-lineheight-sm), | |
| 29 | + | |
| 30 | + 'tit-xlg': (font-size: var(--font-tit-xlg), font-weight: $size-font-weight-xlg, line-height: $size-font-lineheight-sm), | |
| 31 | + 'tit-lg': (font-size: var(--font-tit-lg), font-weight: $size-font-weight-xlg, line-height: $size-font-lineheight-sm), | |
| 32 | + 'tit-md': (font-size: var(--font-tit-md), font-weight: $size-font-weight-xlg, line-height: $size-font-lineheight-sm), | |
| 33 | + 'tit-sm': (font-size: var(--font-tit-sm), font-weight: $size-font-weight-xlg, line-height: $size-font-lineheight-sm), | |
| 34 | + 'tit-xsm': (font-size: var(--font-tit-xsm), font-weight: $size-font-weight-xlg, line-height: $size-font-lineheight-sm), | |
| 35 | + | |
| 36 | + 'body-lg': (font-size: var(--font-body-lg), font-weight: $size-font-weight-md), | |
| 37 | + 'body-md': (font-size: var(--font-body-md), font-weight: $size-font-weight-md), | |
| 38 | + 'body-sm': (font-size: var(--font-body-sm), font-weight: $size-font-weight-md), | |
| 39 | + 'body-xsm': (font-size: var(--font-body-xsm), font-weight: $size-font-weight-md), | |
| 40 | + | |
| 41 | + 'label-lg': (font-size: var(--font-label-lg), font-weight: $size-font-weight-md, line-height: $size-font-lineheight-xsm), | |
| 42 | + 'label-md': (font-size: var(--font-label-md), font-weight: $size-font-weight-md, line-height: $size-font-lineheight-xsm), | |
| 43 | + 'label-sm': (font-size: var(--font-label-sm), font-weight: $size-font-weight-md, line-height: $size-font-lineheight-xsm), | |
| 44 | + 'label-xsm': (font-size: var(--font-label-xsm), font-weight: $size-font-weight-md, line-height: $size-font-lineheight-xsm), | |
| 45 | + | |
| 46 | + 'tit-label': (font-size: var(--font-tit-label), font-weight: $size-font-weight-xlg, color: $color-font-default-tertiary) | |
| 47 | + ); | |
| 48 | + | |
| 49 | + @if (map-has-key($font-map, $cls)) { | |
| 50 | + $font-settings: map-get($font-map, $cls); | |
| 51 | + | |
| 52 | + font-size: map-get($font-settings, font-size); | |
| 53 | + font-weight: map-get($font-settings, font-weight); | |
| 54 | + | |
| 55 | + @if (map-has-key($font-settings, line-height)) { | |
| 56 | + line-height: map-get($font-settings, line-height); | |
| 57 | + } | |
| 58 | + @if (map-has-key($font-settings, color)) { | |
| 59 | + color: map-get($font-settings, color); | |
| 60 | + } | |
| 61 | + } | |
| 62 | + | |
| 63 | + // weight | |
| 64 | + @if ($weight == 'strong') { | |
| 65 | + font-weight: $size-font-weight-lg; | |
| 66 | + } | |
| 67 | + @else if ($weight == 'em') { | |
| 68 | + font-weight: $size-font-weight-xlg; | |
| 69 | + } | |
| 70 | +} | |
| 71 | +@mixin customScroll { | |
| 72 | + &::-webkit-scrollbar { | |
| 73 | + width: 6px; | |
| 74 | + height: 6px; | |
| 75 | + box-sizing: border-box; | |
| 76 | + } | |
| 77 | + &::-webkit-scrollbar-thumb { | |
| 78 | + background-color: rgba($color-black, 0.1); | |
| 79 | + border-radius: 3px; | |
| 80 | + } | |
| 81 | + &::-webkit-scrollbar-track { | |
| 82 | + width: 16px; | |
| 83 | + } | |
| 84 | +} | |
| 85 | + | |
| 86 | +@mixin hideElement { | |
| 87 | + position: absolute; | |
| 88 | + width: 0.1rem; | |
| 89 | + height: 0.1rem; | |
| 90 | + margin: -0.1rem; | |
| 91 | + overflow: hidden; | |
| 92 | + clip-path: polygon(0 0, 0 0, 0 0); | |
| 93 | +} | |
| 94 | + | |
| 95 | +//text-ellipsis | |
| 96 | +// 한줄ex : @include ellipsis(1); | |
| 97 | +// 두줄이상ex : @include ellipsis(2,1.5,3); | |
| 98 | +@mixin ellipsis($line , $line-height:1.4) { | |
| 99 | + @if ($line == 1) { | |
| 100 | + text-overflow:ellipsis; | |
| 101 | + white-space:nowrap; | |
| 102 | + word-wrap:normal; | |
| 103 | + width:100%; | |
| 104 | + overflow:hidden; | |
| 105 | + } @else { | |
| 106 | + display: -webkit-box; | |
| 107 | + overflow: hidden; | |
| 108 | + line-height: $line-height; | |
| 109 | + width: 100%; | |
| 110 | + text-overflow: ellipsis; | |
| 111 | + -webkit-box-orient: vertical; | |
| 112 | + -webkit-line-clamp: $line; | |
| 113 | + } | |
| 114 | +} | |
| 115 | + | |
| 116 | +@mixin transition($property, $duration:0.3s, $delay:0s, $tf:linear) { | |
| 117 | + transition-property: $property; | |
| 118 | + transition-duration: $duration; | |
| 119 | + transition-delay: $delay; | |
| 120 | + transition-timing-function: $tf; | |
| 121 | +} | |
| 122 | + | |
| 123 | +@mixin widthOver { | |
| 124 | + width: calc(100% + $size-wrap-spacing * 2); | |
| 125 | + margin-left:calc($size-wrap-spacing * -1); | |
| 126 | + margin-right:calc($size-wrap-spacing * -1); | |
| 127 | + padding-left:$size-wrap-spacing; | |
| 128 | + padding-right:$size-wrap-spacing; | |
| 129 | +} | |
| 130 | + | |
| 131 | +@mixin clear { | |
| 132 | + &::after { | |
| 133 | + content: ""; | |
| 134 | + display: block; | |
| 135 | + clear: both; | |
| 136 | + } | |
| 137 | +} | |
| 138 | + | |
| 139 | +@mixin ico-set($color: $color-icon-default-secondary, $size:$size-icon-md) { | |
| 140 | + width: $size; | |
| 141 | + height: $size; | |
| 142 | + mask-size: cover; | |
| 143 | + mask-position: center; | |
| 144 | + mask-repeat: no-repeat; | |
| 145 | + background-color: $color; | |
| 146 | +} | |
| 147 | + | |
| 148 | +@mixin ico($size, $el, $color: $color-icon-default-primary) { | |
| 149 | + width: $size; | |
| 150 | + height: $size; | |
| 151 | + mask-size: cover; | |
| 152 | + mask-position: center; | |
| 153 | + mask-repeat: no-repeat; | |
| 154 | + mask-image: url(pathIcon(map-get($icons, #{"ico-"+ $el}))); | |
| 155 | + background-color: $color; | |
| 156 | +} | |
| 157 | + | |
| 158 | +@mixin img-size { | |
| 159 | + position: relative; | |
| 160 | + display: block; | |
| 161 | + width: 100%; | |
| 162 | + // height: 0; | |
| 163 | + // padding-top: 56.56%; | |
| 164 | + aspect-ratio: 1/0.5656; | |
| 165 | + background: $color-gray5; | |
| 166 | + overflow: hidden; | |
| 167 | + border-radius: $radius-md; | |
| 168 | + border:1px solid $color-gray30; | |
| 169 | + box-sizing: border-box; | |
| 170 | + img { | |
| 171 | + position: absolute; | |
| 172 | + top:0; | |
| 173 | + left:0; | |
| 174 | + right:0; | |
| 175 | + bottom:0; | |
| 176 | + display: block; | |
| 177 | + object-fit: cover; | |
| 178 | + width: 100%; | |
| 179 | + height: 100%; | |
| 180 | + transition: all .5s; | |
| 181 | + } | |
| 182 | +} | |
| 183 | +@mixin editor-cont { | |
| 184 | + br { | |
| 185 | + display: none !important; | |
| 186 | + } | |
| 187 | +} | |
| 188 | +@mixin focus-outline { | |
| 189 | + outline: $size-stroke-sm solid $color-black; | |
| 190 | + outline-offset: $size-stroke-sm * -1; | |
| 191 | +} | |
| 192 | + | |
| 193 | +$breakpoints: ( | |
| 194 | + 'pcLg': (min-width: $pc-lg), | |
| 195 | + 'pc': (max-width: $pc), | |
| 196 | + 'pcSm': (max-width: $pc-sm), | |
| 197 | + 'tablet': (max-width: $tablet), | |
| 198 | + 'tabletSm': (max-width: $tablet-sm), | |
| 199 | + 'mobile': (max-width: $mobile), | |
| 200 | + 'mobileSm': (max-width: $mobile-sm), | |
| 201 | + 'mobileXsm': (max-width: $mobile-xsm), | |
| 202 | + 'portrait': (orientation: portrait) and (max-width: 1023px) | |
| 203 | +); | |
| 204 | + | |
| 205 | +@mixin responsive($breakpoint) { | |
| 206 | + $raw-query: map-get($breakpoints, $breakpoint); | |
| 207 | + | |
| 208 | + @if $raw-query { | |
| 209 | + $query: if( | |
| 210 | + type-of($raw-query) == 'string', | |
| 211 | + unquote($raw-query), | |
| 212 | + inspect($raw-query) | |
| 213 | + ); | |
| 214 | + | |
| 215 | + @media #{$query} { | |
| 216 | + @content; | |
| 217 | + } | |
| 218 | + } | |
| 219 | +} | |
| 220 | +@mixin scroll-hide { | |
| 221 | + -webkit-overflow-scrolling: touch; | |
| 222 | + | |
| 223 | + // 모바일(터치 디바이스)에서만 모든 스크롤바 스타일 숨김 | |
| 224 | + @media (hover: none) and (pointer: coarse) { | |
| 225 | + scrollbar-width: none; // Firefox | |
| 226 | + -ms-overflow-style: none; // IE/Edge | |
| 227 | + | |
| 228 | + // WebKit 브라우저용 – 모바일에서만 적용되도록 @media 안에서 직접 정의 | |
| 229 | + *::-webkit-scrollbar { | |
| 230 | + display: none; | |
| 231 | + } | |
| 232 | + } | |
| 233 | +} | |
| 234 | + | |
| 235 | +$state-colors: ( | |
| 236 | + "default": ( | |
| 237 | + font: $color-font-default-tertiary, | |
| 238 | + icon: $color-icon-default-secondary, | |
| 239 | + bg: $color-background-default-secondary, | |
| 240 | + stroke: $color-stroke-default-tertiary | |
| 241 | + ), | |
| 242 | + "success": ( | |
| 243 | + font: $color-font-success-primary, | |
| 244 | + icon: $color-icon-success-primary, | |
| 245 | + bg: $color-background-success-primary, | |
| 246 | + stroke: $color-stroke-success-primary | |
| 247 | + ), | |
| 248 | + "warning": ( | |
| 249 | + font: $color-font-warning-primary, | |
| 250 | + icon: $color-icon-warning-primary, | |
| 251 | + bg: $color-background-warning-primary, | |
| 252 | + stroke: $color-stroke-warning-primary | |
| 253 | + ), | |
| 254 | + "info": ( | |
| 255 | + font: $color-font-info-primary, | |
| 256 | + icon: $color-icon-info-primary, | |
| 257 | + bg: $color-background-info-primary, | |
| 258 | + stroke: $color-stroke-info-primary | |
| 259 | + ), | |
| 260 | + "danger": ( | |
| 261 | + font: $color-font-danger-primary, | |
| 262 | + icon: $color-icon-danger-primary, | |
| 263 | + bg: $color-background-danger-primary, | |
| 264 | + stroke: $color-stroke-danger-primary | |
| 265 | + ), | |
| 266 | + "brand-primary": ( | |
| 267 | + font: $color-font-brand-primary, | |
| 268 | + icon: $color-icon-brand-primary, | |
| 269 | + bg: $color-background-brand-primary, | |
| 270 | + stroke: $color-stroke-brand-primary | |
| 271 | + ), | |
| 272 | + "brand-secondary": ( | |
| 273 | + font: $color-font-brand-secondary, | |
| 274 | + icon: $color-icon-brand-secondary, | |
| 275 | + bg: $color-background-brand-secondary, | |
| 276 | + stroke: $color-stroke-brand-secondary | |
| 277 | + ), | |
| 278 | + "brand-accent": ( | |
| 279 | + font: $color-font-brand-accent, | |
| 280 | + icon: $color-icon-brand-accent, | |
| 281 | + bg: $color-background-brand-accent, | |
| 282 | + stroke: $color-stroke-brand-accent | |
| 283 | + ) | |
| 284 | +); | |
| 285 | + | |
| 286 | +@include responsive(tablet) { | |
| 287 | + :root { | |
| 288 | + --font-heading-lg: 5.2rem; | |
| 289 | + --font-heading-md: var(--size-font-4xlg); | |
| 290 | + --font-heading-sm: var(--size-font-3xlg); | |
| 291 | + | |
| 292 | + --font-tit-xlg: 3.6rem; | |
| 293 | + --font-tit-lg: 2.6rem; | |
| 294 | + --font-tit-md: var(--size-font-md); | |
| 295 | + --font-tit-sm: var(--size-font-sm); | |
| 296 | + --font-tit-xsm: var(--size-font-xsm); | |
| 297 | + | |
| 298 | + --font-body-lg : var(--size-font-sm); | |
| 299 | + --font-body-md: var(--size-font-xsm); | |
| 300 | + --font-body-sm: var(--size-font-2xsm); | |
| 301 | + --font-body-xsm: 1rem; | |
| 302 | + | |
| 303 | + --font-label-lg: var(--size-font-sm); | |
| 304 | + --font-label-md: var(--size-font-xsm); | |
| 305 | + --font-label-sm: var(--size-font-2xsm); | |
| 306 | + --font-label-xsm: 1rem; | |
| 307 | + | |
| 308 | + --font-tit-label: var(--size-font-xsm); | |
| 309 | + | |
| 310 | + --spacing-section-sm: var(--spacing-2xlg); | |
| 311 | + --spacing-section-md: var(--spacing-3xlg); | |
| 312 | + --spacing-section-lg: 16rem; | |
| 313 | + | |
| 314 | + --size-wrap-spacing: 2.4rem; | |
| 315 | + } | |
| 316 | +} | |
| 317 | + | |
| 318 | +@include responsive(mobile) { | |
| 319 | + [data-responsive="true"]:root { | |
| 320 | + --font-heading-lg: 4.8rem; | |
| 321 | + --font-heading-md: var(--size-font-4xlg); | |
| 322 | + --font-heading-sm: var(--size-font-3xlg); | |
| 323 | + | |
| 324 | + --font-tit-xlg: 3.6rem; | |
| 325 | + --font-tit-lg: 2.4rem; | |
| 326 | + --font-tit-md: var(--size-font-md); | |
| 327 | + --font-tit-sm: var(--size-font-sm); | |
| 328 | + --font-tit-xsm: var(--size-font-xsm); | |
| 329 | + | |
| 330 | + --font-body-lg : var(--size-font-sm); | |
| 331 | + --font-body-md: var(--size-font-xsm); | |
| 332 | + --font-body-sm: var(--size-font-2xsm); | |
| 333 | + --font-body-xsm: 1rem; | |
| 334 | + | |
| 335 | + --font-label-lg: var(--size-font-sm); | |
| 336 | + --font-label-md: var(--size-font-xsm); | |
| 337 | + --font-label-sm: var(--size-font-2xsm); | |
| 338 | + --font-label-xsm: 1rem; | |
| 339 | + | |
| 340 | + --font-tit-label: var(--size-font-xsm); | |
| 341 | + | |
| 342 | + --size-wrap-spacing: 1.6rem; | |
| 343 | + | |
| 344 | + --spacing-section-lg: 12rem; | |
| 345 | + | |
| 346 | + --form-height-lg: 5.6rem; | |
| 347 | + --form-height-md: 4rem; | |
| 348 | + --form-height-sm: 3.2rem; | |
| 349 | + --form-height-xsm: 2.4rem; | |
| 350 | + } | |
| 351 | +} |
+++ resources/front/site/SITE_00000/css/common/abstracts/_variables.scss
... | ... | @@ -0,0 +1,664 @@ |
| 1 | +// reference color | |
| 2 | +$color-transparent: transparent; | |
| 3 | + | |
| 4 | +$color-white:#fff; | |
| 5 | +$color-white-alpha90:rgba($color-white, .95); | |
| 6 | +$color-white-alpha80:rgba($color-white, .9); | |
| 7 | +$color-white-alpha70:rgba($color-white, .8); | |
| 8 | +$color-white-alpha60:rgba($color-white, .75); | |
| 9 | +$color-white-alpha50:rgba($color-white, .50); | |
| 10 | +$color-white-alpha40:rgba($color-white, .25); | |
| 11 | +$color-white-alpha30:rgba($color-white, .15); | |
| 12 | +$color-white-alpha20:rgba($color-white, .10); | |
| 13 | +$color-white-alpha10:rgba($color-white, .5); | |
| 14 | +$color-white-alpha5:rgba($color-white, .25); | |
| 15 | + | |
| 16 | +$color-black:#111; | |
| 17 | +$color-black-alpha90:rgba($color-black, .95); | |
| 18 | +$color-black-alpha80:rgba($color-black, .9); | |
| 19 | +$color-black-alpha70:rgba($color-black, .8); | |
| 20 | +$color-black-alpha60:rgba($color-black, .75); | |
| 21 | +$color-black-alpha50:rgba($color-black, .50); | |
| 22 | +$color-black-alpha40:rgba($color-black, .25); | |
| 23 | +$color-black-alpha30:rgba($color-black, .15); | |
| 24 | +$color-black-alpha20:rgba($color-black, .10); | |
| 25 | +$color-black-alpha10:rgba($color-black, .5); | |
| 26 | +$color-black-alpha5:rgba($color-black, .25); | |
| 27 | + | |
| 28 | +$color-gray5:#F8F8FB; | |
| 29 | +$color-gray10:#F0F0F5; | |
| 30 | +$color-gray20:#EFEEF3; | |
| 31 | +$color-gray30:#DDDAE3; | |
| 32 | +$color-gray40:#C1BFC8; | |
| 33 | +$color-gray50:#918F97; | |
| 34 | +$color-gray60:#727077; | |
| 35 | +$color-gray70:#5A585E; | |
| 36 | +$color-gray80:#333333; | |
| 37 | +$color-gray90:#202020; | |
| 38 | + | |
| 39 | +$color-pink5:#FFF2F6; | |
| 40 | +$color-pink10:#FFE3EB; | |
| 41 | +$color-pink20:#FFC5D7; | |
| 42 | +$color-pink30:#FFA4B4; | |
| 43 | +$color-pink40:#FF8291; | |
| 44 | +$color-pink50:#F65C70; | |
| 45 | +$color-pink60:#CD365E; | |
| 46 | +$color-pink70:#AA2142; | |
| 47 | +$color-pink80:#752836; | |
| 48 | +$color-pink90:#3D1530; | |
| 49 | + | |
| 50 | +$color-red5:#FEF1F1; | |
| 51 | +$color-red10:#FCCCCC; | |
| 52 | +$color-red20:#F89999; | |
| 53 | +$color-red30:#F56666; | |
| 54 | +$color-red40:#F23B3B; | |
| 55 | +$color-red50:#EE0000; | |
| 56 | +$color-red60:#CD0404; | |
| 57 | +$color-red70:#8F0000; | |
| 58 | +$color-red80:#5F0000; | |
| 59 | +$color-red90:#300000; | |
| 60 | + | |
| 61 | +$color-orange5:#FFF4F0; | |
| 62 | +$color-orange10:#FFDACC; | |
| 63 | +$color-orange20:#FFB599; | |
| 64 | +$color-orange30:#FF8F66; | |
| 65 | +$color-orange40:#FF6A33; | |
| 66 | +$color-orange50:#FF4500; | |
| 67 | +$color-orange60:#D53209; | |
| 68 | +$color-orange70:#992900; | |
| 69 | +$color-orange80:#661C00; | |
| 70 | +$color-orange90:#330E00; | |
| 71 | + | |
| 72 | +$color-brown5:#F8F2ED; | |
| 73 | +$color-brown10:#ECDCCD; | |
| 74 | +$color-brown20:#D9B99C; | |
| 75 | +$color-brown30:#C6976A; | |
| 76 | +$color-brown40:#B37439; | |
| 77 | +$color-brown50:#A05107; | |
| 78 | +$color-brown60:#804106; | |
| 79 | +$color-brown70:#603104; | |
| 80 | +$color-brown80:#402003; | |
| 81 | +$color-brown90:#201001; | |
| 82 | + | |
| 83 | +$color-yellow5:#FFF8E9; | |
| 84 | +$color-yellow10:#FFEAC1; | |
| 85 | +$color-yellow20:#FFE2A7; | |
| 86 | +$color-yellow30:#FFD47C; | |
| 87 | +$color-yellow40:#FFC550; | |
| 88 | +$color-yellow50:#FFB724; | |
| 89 | +$color-yellow60:#98690A; | |
| 90 | +$color-yellow70:#66490E; | |
| 91 | +$color-yellow80:#4C370B; | |
| 92 | +$color-yellow90:#332507; | |
| 93 | + | |
| 94 | +$color-olive5:#F8F8ED; | |
| 95 | +$color-olive10:#EBEBCC; | |
| 96 | +$color-olive20:#D6D699; | |
| 97 | +$color-olive30:#C2C266; | |
| 98 | +$color-olive40:#ADAD33; | |
| 99 | +$color-olive50:#999900; | |
| 100 | +$color-olive60:#7A7A00; | |
| 101 | +$color-olive70:#5C5C00; | |
| 102 | +$color-olive80:#3D3D00; | |
| 103 | +$color-olive90:#3D3D00; | |
| 104 | + | |
| 105 | +$color-lime5:#F6FCEE; | |
| 106 | +$color-lime10:#EAF8D5; | |
| 107 | +$color-lime20:#DEFFAB; | |
| 108 | +$color-lime30:#CEFE83; | |
| 109 | +$color-lime40:#A1F524; | |
| 110 | +$color-lime50:#7FD100; | |
| 111 | +$color-lime60:#6CAB0A; | |
| 112 | +$color-lime70:#699B1C; | |
| 113 | +$color-lime80:#476912; | |
| 114 | +$color-lime90:#253709; | |
| 115 | + | |
| 116 | +$color-green5:#F3FCF3; | |
| 117 | +$color-green10:#D6F5D6; | |
| 118 | +$color-green20:#C2EFC2; | |
| 119 | +$color-green30:#85DC85; | |
| 120 | +$color-green40:#42BE42; | |
| 121 | +$color-green50:#009500; | |
| 122 | +$color-green60:#006600; | |
| 123 | +$color-green70:#004D00; | |
| 124 | +$color-green80:#003300; | |
| 125 | +$color-green90:#001A00; | |
| 126 | + | |
| 127 | +$color-aqua5:#E7FDFD; | |
| 128 | +$color-aqua10:#CEFBFB; | |
| 129 | +$color-aqua20:#9DF6F6; | |
| 130 | +$color-aqua30:#6DF2F2; | |
| 131 | +$color-aqua40:#3BEDED; | |
| 132 | +$color-aqua50:#15DFDF; | |
| 133 | +$color-aqua60:#03C4C4; | |
| 134 | +$color-aqua70:#078C8C; | |
| 135 | +$color-aqua80:#045D5D; | |
| 136 | +$color-aqua90:#022F2F; | |
| 137 | + | |
| 138 | +$color-blue5:#F0F9FF; | |
| 139 | +$color-blue10:#C7E3FF; | |
| 140 | +$color-blue20:#8FC8FF; | |
| 141 | +$color-blue30:#56ACFF; | |
| 142 | +$color-blue40:#1E90FF; | |
| 143 | +$color-blue50:#0074E5; | |
| 144 | +$color-blue60:#0056AA; | |
| 145 | +$color-blue70:#00407F; | |
| 146 | +$color-blue80:#002B55; | |
| 147 | +$color-blue90:#00152A; | |
| 148 | + | |
| 149 | +$color-indigo5:#F0F5FB; | |
| 150 | +$color-indigo10:#D1E2F5; | |
| 151 | +$color-indigo20:#88B7EC; | |
| 152 | +$color-indigo30:#4686CF; | |
| 153 | +$color-indigo40:#1359A9; | |
| 154 | +$color-indigo50:#004593; | |
| 155 | +$color-indigo60:#003878; | |
| 156 | +$color-indigo70:#002E62; | |
| 157 | +$color-indigo80:#002248; | |
| 158 | +$color-indigo90:#001D3F; | |
| 159 | + | |
| 160 | +$color-navy5:#F1F1F9; | |
| 161 | +$color-navy10:#D3D5ED; | |
| 162 | +$color-navy20:#A7ABDA; | |
| 163 | +$color-navy30:#7B82C8; | |
| 164 | +$color-navy40:#4F58B5; | |
| 165 | +$color-navy50:#232EA3; | |
| 166 | +$color-navy60:#1C2582; | |
| 167 | +$color-navy70:#141C62; | |
| 168 | +$color-navy80:#0E1241; | |
| 169 | +$color-navy90:#070922; | |
| 170 | + | |
| 171 | +$color-violet5:#F4EFFA; | |
| 172 | +$color-violet10:#DED1F1; | |
| 173 | +$color-violet20:#BDA2E3; | |
| 174 | +$color-violet30:#9B74D4; | |
| 175 | +$color-violet40:#7A45C6; | |
| 176 | +$color-violet50:#5917B8; | |
| 177 | +$color-violet60:#471293; | |
| 178 | +$color-violet70:#340F6E; | |
| 179 | +$color-violet80:#24094A; | |
| 180 | +$color-violet90:#120425; | |
| 181 | + | |
| 182 | +$color-purple5:#F5EEF7; | |
| 183 | +$color-purple10:#E1CCE6; | |
| 184 | +$color-purple20:#C499CC; | |
| 185 | +$color-purple30:#A666B3; | |
| 186 | +$color-purple40:#893399; | |
| 187 | +$color-purple50:#6B0080; | |
| 188 | +$color-purple60:#560066; | |
| 189 | +$color-purple70:#40004D; | |
| 190 | +$color-purple80:#2B0033; | |
| 191 | +$color-purple90:#15001A; | |
| 192 | + | |
| 193 | +/* reference size */ | |
| 194 | +$radius-none: 0; | |
| 195 | +$radius-xsm: 0.4rem; | |
| 196 | +$radius-sm: 0.8rem; | |
| 197 | +$radius-md: 1.6rem; | |
| 198 | +$radius-lg: 2.4rem; | |
| 199 | +$radius-xlg: 4rem; | |
| 200 | +$radius-2xlg: 8rem; | |
| 201 | +$radius-full: 100%; | |
| 202 | + | |
| 203 | +$spacing-none: 0; | |
| 204 | +$spacing-3xsm: 0.2rem; | |
| 205 | +$spacing-2xsm: 0.4rem; | |
| 206 | +$spacing-xsm: 0.8rem; | |
| 207 | +$spacing-sm: 1.2rem; | |
| 208 | +$spacing-md: 1.6rem; | |
| 209 | +$spacing-lg: 2.4rem; | |
| 210 | +$spacing-xlg: 3.2rem; | |
| 211 | +$spacing-2xlg: 4rem; | |
| 212 | +$spacing-3xlg: 8rem; | |
| 213 | + | |
| 214 | +$size-stroke-none: 0; | |
| 215 | +$size-stroke-xsm: 0.1rem; | |
| 216 | +$size-stroke-sm: 0.2rem; | |
| 217 | +$size-stroke-md: 0.4rem; | |
| 218 | +$size-stroke-lg: 0.8rem; | |
| 219 | + | |
| 220 | +:root { | |
| 221 | + /* theme */ | |
| 222 | + --color-primary5: #{$color-blue5}; | |
| 223 | + --color-primary10: #{$color-blue10}; | |
| 224 | + --color-primary20: #{$color-blue20}; | |
| 225 | + --color-primary30: #{$color-blue30}; | |
| 226 | + --color-primary40: #{$color-blue40}; | |
| 227 | + --color-primary50: #{$color-blue50}; | |
| 228 | + --color-primary60: #{$color-blue60}; | |
| 229 | + --color-primary70: #{$color-blue70}; | |
| 230 | + --color-primary80: #{$color-blue80}; | |
| 231 | + --color-primary90: #{$color-blue90}; | |
| 232 | + | |
| 233 | + --color-secondary5: #{$color-indigo5}; | |
| 234 | + --color-secondary10: #{$color-indigo10}; | |
| 235 | + --color-secondary20: #{$color-indigo20}; | |
| 236 | + --color-secondary30: #{$color-indigo30}; | |
| 237 | + --color-secondary40: #{$color-indigo40}; | |
| 238 | + --color-secondary50: #{$color-indigo50}; | |
| 239 | + --color-secondary60: #{$color-indigo60}; | |
| 240 | + --color-secondary70: #{$color-indigo70}; | |
| 241 | + --color-secondary80: #{$color-indigo80}; | |
| 242 | + --color-secondary90: #{$color-indigo90}; | |
| 243 | + | |
| 244 | + --color-accent5: #{$color-pink5}; | |
| 245 | + --color-accent10: #{$color-pink10}; | |
| 246 | + --color-accent20: #{$color-pink20}; | |
| 247 | + --color-accent30: #{$color-pink30}; | |
| 248 | + --color-accent40: #{$color-pink40}; | |
| 249 | + --color-accent50: #{$color-pink50}; | |
| 250 | + --color-accent60: #{$color-pink60}; | |
| 251 | + --color-accent70: #{$color-pink70}; | |
| 252 | + --color-accent80: #{$color-pink80}; | |
| 253 | + --color-accent90: #{$color-pink90}; | |
| 254 | + | |
| 255 | + /* color */ | |
| 256 | + --color-background-site: #{$color-white}; | |
| 257 | + --color-background-default-primary: #{$color-white}; | |
| 258 | + --color-background-default-secondary: #{$color-gray5}; | |
| 259 | + --color-background-default-tertiary: #{$color-gray20}; | |
| 260 | + --color-background-default-quaternary: #{$color-gray30}; | |
| 261 | + --color-background-default-primary-inverse: #{$color-gray80}; | |
| 262 | + --color-background-default-secondary-inverse: #{$color-gray70}; | |
| 263 | + --color-background-default-tertiary-inverse: #{$color-gray60}; | |
| 264 | + --color-background-default-quaternary-inverse: #{$color-gray50}; | |
| 265 | + --color-background-alpha-primary: #{$color-white-alpha80}; | |
| 266 | + --color-background-alpha-primary-inverse: #{$color-black-alpha60}; | |
| 267 | + --color-background-success-primary: #{$color-green5}; | |
| 268 | + --color-background-success-primary-inverse: #{$color-green50}; | |
| 269 | + --color-background-warning-primary: #{$color-yellow5}; | |
| 270 | + --color-background-warning-primary-inverse: #{$color-yellow60}; | |
| 271 | + --color-background-info-primary: #{$color-blue5}; | |
| 272 | + --color-background-info-primary-inverse: #{$color-blue50}; | |
| 273 | + --color-background-danger-primary: #{$color-red5}; | |
| 274 | + --color-background-danger-primary-inverse: #{$color-red50}; | |
| 275 | + --color-background-brand-primary: var(--color-primary5); | |
| 276 | + --color-background-brand-secondary: var(--color-secondary5); | |
| 277 | + --color-background-brand-accent: var(--color-accent5); | |
| 278 | + --color-background-brand-primary-inverse: var(--color-primary50); | |
| 279 | + --color-background-brand-secondary-inverse: var(--color-secondary50); | |
| 280 | + --color-background-brand-accent-inverse: var(--color-accent50); | |
| 281 | + --color-background-brand-primary-inverse-hover: var(--color-primary60); | |
| 282 | + --color-background-brand-secondary-inverse-hover: var(--color-secondary60); | |
| 283 | + --color-background-brand-accent-inverse-hover: var(--color-accent60); | |
| 284 | + --color-background-disabled-primary: #{$color-gray20}; | |
| 285 | + --color-background-disabled-secondary: #{$color-gray30}; | |
| 286 | + | |
| 287 | + --color-font-default-primary: #{$color-gray80}; | |
| 288 | + --color-font-default-secondary: #{$color-gray70}; | |
| 289 | + --color-font-default-tertiary: #{$color-gray60}; | |
| 290 | + --color-font-default-quaternary: #{$color-gray50}; | |
| 291 | + --color-font-default-primary-inverse: #{$color-white}; | |
| 292 | + --color-font-default-secondary-inverse: #{$color-white-alpha80}; | |
| 293 | + --color-font-default-tertiary-inverse: #{$color-white-alpha70}; | |
| 294 | + --color-font-default-quaternary-inverse: #{$color-white-alpha60}; | |
| 295 | + --color-font-success-primary: #{$color-green60}; | |
| 296 | + --color-font-success-primary-inverse: #{$color-green5}; | |
| 297 | + --color-font-warning-primary: #{$color-yellow70}; | |
| 298 | + --color-font-warning-primary-inverse: #{$color-yellow5}; | |
| 299 | + --color-font-info-primary: #{$color-blue60}; | |
| 300 | + --color-font-info-primary-inverse: #{$color-blue5}; | |
| 301 | + --color-font-danger-primary: #{$color-red60}; | |
| 302 | + --color-font-danger-primary-inverse: #{$color-red5}; | |
| 303 | + --color-font-brand-primary: var(--color-primary60); | |
| 304 | + --color-font-brand-secondary: var(--color-secondary60); | |
| 305 | + --color-font-brand-accent: var(--color-accent60); | |
| 306 | + --color-font-brand-primary-base: var(--color-primary50); | |
| 307 | + --color-font-brand-accent-base: var(--color-accent50); | |
| 308 | + --color-font-brand-secondary-base: var(--color-secondary50); | |
| 309 | + --color-font-brand-accent-base: var(--color-accent50); | |
| 310 | + --color-font-brand-primary-inverse: var(--color-primary5); | |
| 311 | + --color-font-brand-secondary-inverse: var(--color-secondary5); | |
| 312 | + --color-font-brand-accent-inverse: var(--color-accent5); | |
| 313 | + --color-font-disabled-primary: #{$color-gray60}; | |
| 314 | + --color-font-disabled-secondary: #{$color-gray70}; | |
| 315 | + | |
| 316 | + --color-stroke-default-primary: #{$color-gray80}; | |
| 317 | + --color-stroke-default-secondary: #{$color-gray40}; | |
| 318 | + --color-stroke-default-tertiary: #{$color-gray30}; | |
| 319 | + --color-stroke-default-quaternary: #{$color-gray10}; | |
| 320 | + --color-stroke-default-primary-inverse: #{$color-white}; | |
| 321 | + --color-stroke-default-secondary-inverse: #{$color-gray60}; | |
| 322 | + --color-stroke-default-tertiary-inverse: #{$color-gray70}; | |
| 323 | + --color-stroke-default-quaternary-inverse: #{$color-gray80}; | |
| 324 | + | |
| 325 | + --color-stroke-success-primary: #{$color-green50}; | |
| 326 | + --color-stroke-success-primary-inverse: #{$color-green10}; | |
| 327 | + --color-stroke-warning-primary: #{$color-yellow60}; | |
| 328 | + --color-stroke-warning-primary-inverse: #{$color-yellow50}; | |
| 329 | + --color-stroke-info-primary: #{$color-blue50}; | |
| 330 | + --color-stroke-info-primary-inverse: #{$color-blue10}; | |
| 331 | + --color-stroke-danger-primary: #{$color-red50}; | |
| 332 | + --color-stroke-danger-primary-inverse: #{$color-red10}; | |
| 333 | + --color-stroke-brand-primary: var(--color-primary50); | |
| 334 | + --color-stroke-brand-primary-inverse: var(--color-primary10); | |
| 335 | + --color-stroke-brand-secondary: var(--color-secondary50); | |
| 336 | + --color-stroke-brand-secondary-inverse: var(--color-secondary10); | |
| 337 | + --color-stroke-brand-accent: var(--color-accent50); | |
| 338 | + --color-stroke-brand-accent-inverse: var(--color-accent10); | |
| 339 | + --color-stroke-disabled-primary: #{$color-gray30}; | |
| 340 | + --color-stroke-disabled-primary: #{$color-gray40}; | |
| 341 | + | |
| 342 | + --color-icon-default-primary: #{$color-gray80}; | |
| 343 | + --color-icon-default-secondary: #{$color-gray60}; | |
| 344 | + --color-icon-default-primary-inverse: #{$color-white}; | |
| 345 | + --color-icon-default-secondary-inverse: #{$color-white-alpha60}; | |
| 346 | + --color-icon-success-primary: #{$color-green50}; | |
| 347 | + --color-icon-success-primary-inverse: #{$color-green5}; | |
| 348 | + --color-icon-warning-primary: #{$color-yellow60}; | |
| 349 | + --color-icon-warning-primary-inverse: #{$color-yellow5}; | |
| 350 | + --color-icon-info-primary: #{$color-blue50}; | |
| 351 | + --color-icon-info-primary-inverse: #{$color-blue5}; | |
| 352 | + --color-icon-danger-primary: #{$color-red50}; | |
| 353 | + --color-icon-danger-primary-inverse: #{$color-red5}; | |
| 354 | + --color-icon-brand-primary: var(--color-primary50); | |
| 355 | + --color-icon-brand-secondary: var(--color-secondary50); | |
| 356 | + --color-icon-brand-accent: var(--color-accent50); | |
| 357 | + --color-icon-brand-primary-inverse: var(--color-primary5); | |
| 358 | + --color-icon-brand-secondary-inverse: var(--color-secondary5); | |
| 359 | + --color-icon-brand-accent-inverse: var(--color-accent5); | |
| 360 | + --color-icon-disabled-primary: #{$color-gray50}; | |
| 361 | + --color-icon-disabled-secondary: #{$color-gray60}; | |
| 362 | + | |
| 363 | + /* size */ | |
| 364 | + --radius-none: #{$radius-none}; | |
| 365 | + --radius-xsm: #{$radius-xsm}; | |
| 366 | + --radius-sm: #{$radius-sm}; | |
| 367 | + --radius-md: #{$radius-md}; | |
| 368 | + --radius-lg: #{$radius-lg}; | |
| 369 | + --radius-xlg: #{$radius-xlg}; | |
| 370 | + --radius-2xlg: #{$radius-2xlg}; | |
| 371 | + --radius-full: #{$radius-full}; | |
| 372 | + | |
| 373 | + --spacing-none: #{$spacing-none}; | |
| 374 | + --spacing-3xsm: #{$spacing-3xsm}; | |
| 375 | + --spacing-2xsm: #{$spacing-2xsm}; | |
| 376 | + --spacing-xsm: #{$spacing-xsm}; | |
| 377 | + --spacing-sm: #{$spacing-sm}; | |
| 378 | + --spacing-md: #{$spacing-md}; | |
| 379 | + --spacing-lg: #{$spacing-lg}; | |
| 380 | + --spacing-xlg: #{$spacing-xlg}; | |
| 381 | + --spacing-2xlg: #{$spacing-2xlg}; | |
| 382 | + --spacing-3xlg: #{$spacing-3xlg}; | |
| 383 | + | |
| 384 | + --size-stroke-none: #{$size-stroke-none}; | |
| 385 | + --size-stroke-xsm: #{$size-stroke-xsm}; | |
| 386 | + --size-stroke-sm: #{$size-stroke-sm}; | |
| 387 | + --size-stroke-md: #{$size-stroke-md}; | |
| 388 | + --size-stroke-lg: #{$size-stroke-lg}; | |
| 389 | + | |
| 390 | + --size-font-4xlg: 4.8rem; | |
| 391 | + --size-font-3xlg: 4rem; | |
| 392 | + --size-font-2xlg: 2.8rem; | |
| 393 | + --size-font-xlg: 2.4rem; | |
| 394 | + --size-font-lg: 2rem; | |
| 395 | + --size-font-md: 1.8rem; | |
| 396 | + --size-font-sm: 1.6rem; | |
| 397 | + --size-font-xsm: 1.4rem; | |
| 398 | + --size-font-2xsm: 1.2rem; | |
| 399 | + --size-font-weight-xlg: 700; | |
| 400 | + --size-font-weight-lg: 500; | |
| 401 | + --size-font-weight-md: 400; | |
| 402 | + | |
| 403 | + --size-font-lineheight-xlg: 2; | |
| 404 | + --size-font-lineheight-lg: 1.5; | |
| 405 | + --size-font-lineheight-md: 1.4; | |
| 406 | + --size-font-lineheight-sm: 1.3; | |
| 407 | + --size-font-lineheight-xsm: 1.2; | |
| 408 | + | |
| 409 | + --size-icon-lg: 2.4rem; | |
| 410 | + --size-icon-md: 2.0rem; | |
| 411 | + --size-icon-sm: 1.6rem; | |
| 412 | + | |
| 413 | + --spacing-section-sm: var(--spacing-2xlg); | |
| 414 | + --spacing-section-md: var(--spacing-3xlg); | |
| 415 | + --spacing-section-lg: 16rem; | |
| 416 | + | |
| 417 | + --size-wrap: 125.4rem; | |
| 418 | + --size-wrap-md: 102.4rem; | |
| 419 | + --size-wrap-sm: 80rem; | |
| 420 | + --size-wrap-xsm: 48rem; | |
| 421 | + --size-wrap-2xsm: 40rem; | |
| 422 | + --size-wrap-full: 133.4rem; | |
| 423 | + --size-wrap-spacing: 4rem; | |
| 424 | + | |
| 425 | + --size-popup-xsm: 32rem; | |
| 426 | + --size-popup-sm: 44rem; | |
| 427 | + --size-popup-md: 64rem; | |
| 428 | + --size-popup-lg: 80rem; | |
| 429 | + --size-popup-xlg: var(--size-wrap); | |
| 430 | + // --size-popup-2xlg: var(--size-wrap-full); | |
| 431 | + --size-popup-round: var(--radius-radius-md); | |
| 432 | + --size-popup-padding: var(--spacing-spacing-2xlg); | |
| 433 | + | |
| 434 | + --form-height-lg: 6.4rem; | |
| 435 | + --form-height-md: 4.8rem; | |
| 436 | + --form-height-sm: 3.6rem; | |
| 437 | + --form-height-xsm: 2.8rem; | |
| 438 | +} | |
| 439 | + | |
| 440 | + | |
| 441 | +/* theme */ | |
| 442 | +$color-primary5: var(--color-primary5); | |
| 443 | +$color-primary10: var(--color-primary10); | |
| 444 | +$color-primary20: var(--color-primary20); | |
| 445 | +$color-primary30: var(--color-primary30); | |
| 446 | +$color-primary40: var(--color-primary40); | |
| 447 | +$color-primary50: var(--color-primary50); | |
| 448 | +$color-primary60: var(--color-primary60); | |
| 449 | +$color-primary70: var(--color-primary70); | |
| 450 | +$color-primary80: var(--color-primary80); | |
| 451 | +$color-primary90: var(--color-primary90); | |
| 452 | + | |
| 453 | +$color-secondary5: var(--color-secondary5); | |
| 454 | +$color-secondary10: var(--color-secondary10); | |
| 455 | +$color-secondary20: var(--color-secondary20); | |
| 456 | +$color-secondary30: var(--color-secondary30); | |
| 457 | +$color-secondary40: var(--color-secondary40); | |
| 458 | +$color-secondary50: var(--color-secondary50); | |
| 459 | +$color-secondary60: var(--color-secondary60); | |
| 460 | +$color-secondary70: var(--color-secondary70); | |
| 461 | +$color-secondary80: var(--color-secondary80); | |
| 462 | +$color-secondary90: var(--color-secondary90); | |
| 463 | + | |
| 464 | +$color-accent5: var(--color-accent5); | |
| 465 | +$color-accent10: var(--color-accent10); | |
| 466 | +$color-accent20: var(--color-accent20); | |
| 467 | +$color-accent30: var(--color-accent30); | |
| 468 | +$color-accent40: var(--color-accent40); | |
| 469 | +$color-accent50: var(--color-accent50); | |
| 470 | +$color-accent60: var(--color-accent60); | |
| 471 | +$color-accent70: var(--color-accent70); | |
| 472 | +$color-accent80: var(--color-accent80); | |
| 473 | +$color-accent90: var(--color-accent90); | |
| 474 | + | |
| 475 | +/* color */ | |
| 476 | +$color-background-site: var(--color-background-site); | |
| 477 | +$color-background-default-primary: var(--color-background-default-primary); | |
| 478 | +$color-background-default-secondary: var(--color-background-default-secondary); | |
| 479 | +$color-background-default-tertiary: var(--color-background-default-tertiary); | |
| 480 | +$color-background-default-quaternary: var(--color-background-default-quaternary); | |
| 481 | +$color-background-default-primary-inverse: var(--color-background-default-primary-inverse); | |
| 482 | +$color-background-default-secondary-inverse: var(--color-background-default-secondary-inverse); | |
| 483 | +$color-background-default-tertiary-inverse: var(--color-background-default-tertiary-inverse); | |
| 484 | +$color-background-default-quaternary-inverse: var(--color-background-default-quaternary-inverse); | |
| 485 | +$color-background-alpha-primary: var(--color-background-alpha-primary); | |
| 486 | +$color-background-alpha-primary-inverse: var(--color-background-alpha-primary-inverse); | |
| 487 | +$color-background-success-primary: var(--color-background-success-primary); | |
| 488 | +$color-background-success-primary-inverse: var(--color-background-success-primary-inverse); | |
| 489 | +$color-background-warning-primary: var(--color-background-warning-primary); | |
| 490 | +$color-background-warning-primary-inverse: var(--color-background-warning-primary-inverse); | |
| 491 | +$color-background-info-primary: var(--color-background-info-primary); | |
| 492 | +$color-background-info-primary-inverse: var(--color-background-info-primary-inverse); | |
| 493 | +$color-background-danger-primary: var(--color-background-danger-primary); | |
| 494 | +$color-background-danger-primary-inverse: var(--color-background-danger-primary-inverse); | |
| 495 | +$color-background-brand-primary: var(--color-background-brand-primary); | |
| 496 | +$color-background-brand-secondary: var(--color-background-brand-secondary); | |
| 497 | +$color-background-brand-accent: var(--color-background-brand-accent); | |
| 498 | +$color-background-brand-primary-inverse: var(--color-background-brand-primary-inverse); | |
| 499 | +$color-background-brand-secondary-inverse: var(--color-background-brand-secondary-inverse); | |
| 500 | +$color-background-brand-accent-inverse: var(--color-background-brand-accent-inverse); | |
| 501 | +$color-background-brand-primary-inverse-hover: var(--color-background-brand-primary-inverse-hover); | |
| 502 | +$color-background-brand-secondary-inverse-hover: var(--color-background-brand-secondary-inverse-hover); | |
| 503 | +$color-background-brand-accent-inverse-hover: var(--color-background-brand-accent-inverse-hover); | |
| 504 | +$color-background-disabled-primary: var(--color-background-disabled-primary); | |
| 505 | +$color-background-disabled-secondary: var(--color-background-disabled-secondary); | |
| 506 | + | |
| 507 | +$color-font-default-primary: var(--color-font-default-primary); | |
| 508 | +$color-font-default-secondary: var(--color-font-default-secondary); | |
| 509 | +$color-font-default-tertiary: var(--color-font-default-tertiary); | |
| 510 | +$color-font-default-quaternary: var(--color-font-default-quaternary); | |
| 511 | +$color-font-default-primary-inverse: var(--color-font-default-primary-inverse); | |
| 512 | +$color-font-default-secondary-inverse: var(--color-font-default-secondary-inverse); | |
| 513 | +$color-font-default-tertiary-inverse: var(--color-font-default-tertiary-inverse); | |
| 514 | +$color-font-default-quaternary-inverse: var(--color-font-default-quaternary-inverse); | |
| 515 | +$color-font-success-primary: var(--color-font-success-primary); | |
| 516 | +$color-font-success-primary-inverse: var(--color-font-success-primary-inverse); | |
| 517 | +$color-font-warning-primary: var(--color-font-warning-primary); | |
| 518 | +$color-font-warning-primary-inverse: var(--color-font-warning-primary-inverse); | |
| 519 | +$color-font-info-primary: var(--color-font-info-primary); | |
| 520 | +$color-font-info-primary-inverse: var(--color-font-info-primary-inverse); | |
| 521 | +$color-font-danger-primary: var(--color-font-danger-primary); | |
| 522 | +$color-font-danger-primary-inverse: var(--color-font-danger-primary-inverse); | |
| 523 | +$color-font-brand-primary: var(--color-font-brand-primary); | |
| 524 | +$color-font-brand-secondary: var(--color-font-brand-secondary); | |
| 525 | +$color-font-brand-accent: var(--color-font-brand-accent); | |
| 526 | +$color-font-brand-primary-base: var(--color-font-brand-primary-base); | |
| 527 | +$color-font-brand-secondary-base: var(--color-font-brand-secondary-base); | |
| 528 | +$color-font-brand-accent-base: var(--color-font-brand-accent-base); | |
| 529 | +$color-font-brand-primary-inverse: var(--color-font-brand-primary-inverse); | |
| 530 | +$color-font-brand-secondary-inverse: var(--color-font-brand-secondary-inverse); | |
| 531 | +$color-font-brand-accent-inverse: var(--color-font-brand-accent-inverse); | |
| 532 | +$color-font-disabled-primary: var(--color-font-disabled-primary); | |
| 533 | +$color-font-disabled-secondary: var(--color-font-disabled-secondary); | |
| 534 | + | |
| 535 | +$color-stroke-default-primary: var(--color-stroke-default-primary); | |
| 536 | +$color-stroke-default-secondary: var(--color-stroke-default-secondary); | |
| 537 | +$color-stroke-default-tertiary: var(--color-stroke-default-tertiary); | |
| 538 | +$color-stroke-default-quaternary: var(--color-stroke-default-quaternary); | |
| 539 | +$color-stroke-default-primary-inverse: var(--color-stroke-default-primary-inverse); | |
| 540 | +$color-stroke-default-secondary-inverse: var(--color-stroke-default-secondary-inverse); | |
| 541 | +$color-stroke-default-tertiary-inverse: var(--color-stroke-default-tertiary-inverse); | |
| 542 | +$color-stroke-default-quaternary-inverse: var(--color-stroke-default-quaternary-inverse); | |
| 543 | +$color-stroke-success-primary: var(--color-stroke-success-primary); | |
| 544 | +$color-stroke-success-primary-inverse: var(--color-stroke-success-primary-inverse); | |
| 545 | +$color-stroke-warning-primary: var(--color-stroke-warning-primary); | |
| 546 | +$color-stroke-warning-primary-inverse: var(--color-stroke-warning-primary-inverse); | |
| 547 | +$color-stroke-info-primary: var(--color-stroke-info-primary); | |
| 548 | +$color-stroke-info-primary-inverse: var(--color-stroke-info-primary-inverse); | |
| 549 | +$color-stroke-danger-primary: var(--color-stroke-danger-primary); | |
| 550 | +$color-stroke-danger-primary-inverse: var(--color-stroke-danger-primary-inverse); | |
| 551 | +$color-stroke-disabled-primary: var(--color-stroke-disabled-primary); | |
| 552 | +$color-stroke-disabled-secondary: var(--color-stroke-disabled-secondary); | |
| 553 | +$color-stroke-brand-primary: var(--color-stroke-brand-primary); | |
| 554 | +$color-stroke-brand-primary-inverse: var(--color-stroke-brand-primary-inverse); | |
| 555 | +$color-stroke-brand-secondary: var(--color-stroke-brand-secondary); | |
| 556 | +$color-stroke-brand-secondary-inverse: var(--color-stroke-brand-secondary-inverse); | |
| 557 | +$color-stroke-brand-accent: var(--color-stroke-brand-accent); | |
| 558 | +$color-stroke-brand-accent-inverse: var(--color-stroke-brand-accent-inverse); | |
| 559 | + | |
| 560 | +$color-icon-default-primary: var(--color-icon-default-primary); | |
| 561 | +$color-icon-default-primary-inverse: var(--color-icon-default-primary-inverse); | |
| 562 | +$color-icon-default-secondary: var(--color-icon-default-secondary); | |
| 563 | +$color-icon-default-secondary-inverse: var(--color-icon-default-secondary-inverse); | |
| 564 | +$color-icon-success-primary: var(--color-icon-success-primary); | |
| 565 | +$color-icon-success-primary-inverse: var(--color-icon-success-primary-inverse); | |
| 566 | +$color-icon-warning-primary: var(--color-icon-warning-primary); | |
| 567 | +$color-icon-warning-primary-inverse: var(--color-icon-warning-primary-inverse); | |
| 568 | +$color-icon-info-primary: var(--color-icon-info-primary); | |
| 569 | +$color-icon-info-primary-inverse: var(--color-icon-info-primary-inverse); | |
| 570 | +$color-icon-danger-primary: var(--color-icon-danger-primary); | |
| 571 | +$color-icon-danger-primary-inverse: var(--color-icon-danger-primary-inverse); | |
| 572 | +$color-icon-brand-primary: var(--color-icon-brand-primary); | |
| 573 | +$color-icon-brand-secondary: var(--color-icon-brand-secondary); | |
| 574 | +$color-icon-brand-accent: var(--color-icon-brand-accent); | |
| 575 | +$color-icon-brand-primary-inverse: var(--color-icon-brand-primary-inverse); | |
| 576 | +$color-icon-brand-secondary-inverse: var(--color-icon-brand-secondary-inverse); | |
| 577 | +$color-icon-brand-accent-inverse: var(--color-icon-brand-accent-inverse); | |
| 578 | +$color-icon-disabled-primary: var(--color-icon-disabled-primary); | |
| 579 | +$color-icon-disabled-secondary: var(--color-icon-disabled-secondary); | |
| 580 | + | |
| 581 | +/* size */ | |
| 582 | +$size-font-4xlg: var(--size-font-4xlg); | |
| 583 | +$size-font-3xlg: var(--size-font-3xlg); | |
| 584 | +$size-font-2xlg: var(--size-font-2xlg); | |
| 585 | +$size-font-xlg: var(--size-font-xlg); | |
| 586 | +$size-font-lg: var(--size-font-lg); | |
| 587 | +$size-font-md: var(--size-font-md); | |
| 588 | +$size-font-sm: var(--size-font-sm); | |
| 589 | +$size-font-xsm: var(--size-font-xsm); | |
| 590 | +$size-font-2xsm: var(--size-font-2xsm); | |
| 591 | +$size-font-weight-xlg: var(--size-font-weight-xlg); | |
| 592 | +$size-font-weight-lg: var(--size-font-weight-lg); | |
| 593 | +$size-font-weight-md: var(--size-font-weight-md); | |
| 594 | + | |
| 595 | +$size-font-lineheight-xlg : var(--size-font-lineheight-xlg); | |
| 596 | +$size-font-lineheight-lg : var(--size-font-lineheight-lg); | |
| 597 | +$size-font-lineheight-md : var(--size-font-lineheight-md); | |
| 598 | +$size-font-lineheight-sm : var(--size-font-lineheight-sm); | |
| 599 | +$size-font-lineheight-xsm : var(--size-font-lineheight-xsm); | |
| 600 | + | |
| 601 | +$size-icon-lg: var(--size-icon-lg); | |
| 602 | +$size-icon-md: var(--size-icon-md); | |
| 603 | +$size-icon-sm: var(--size-icon-sm); | |
| 604 | + | |
| 605 | +/* etc */ | |
| 606 | +$spacing-section-sm: var(--spacing-section-sm); | |
| 607 | +$spacing-section-md: var(--spacing-section-md); | |
| 608 | +$spacing-section-lg: var(--spacing-section-lg); | |
| 609 | + | |
| 610 | +$size-wrap: var(--size-wrap); | |
| 611 | +$size-wrap-2xsm: var(--size-wrap-2xsm); | |
| 612 | +$size-wrap-xsm: var(--size-wrap-xsm); | |
| 613 | +$size-wrap-sm: var(--size-wrap-sm); | |
| 614 | +$size-wrap-md: var(--size-wrap-md); | |
| 615 | +$size-wrap-full: var(--size-wrap-full); | |
| 616 | +$size-wrap-spacing: var(--size-wrap-spacing); | |
| 617 | + | |
| 618 | +$size-popup-xsm: var(--size-popup-xsm); | |
| 619 | +$size-popup-sm: var(--size-popup-sm); | |
| 620 | +$size-popup-md: var(--size-popup-md); | |
| 621 | +$size-popup-lg: var(--size-popup-lg); | |
| 622 | +$size-popup-xlg: var(--size-popup-xlg); | |
| 623 | +// $size-popup-2xlg: var(--size-popup-2xlg); | |
| 624 | +$size-popup-full: var(--size-popup-full); | |
| 625 | +$size-popup-round: var(--size-popup-round); | |
| 626 | +$size-popup-padding: var(--size-popup-padding); | |
| 627 | + | |
| 628 | +$form-height-lg: var(--form-height-lg); | |
| 629 | +$form-height-md: var(--form-height-md); | |
| 630 | +$form-height-sm: var(--form-height-sm); | |
| 631 | +$form-height-xsm: var(--form-height-xsm); | |
| 632 | + | |
| 633 | +$spot: var(--color-primary50); | |
| 634 | +$spot-hover: var(--color-primary70); | |
| 635 | +$spot2: var(--color-secondary50); | |
| 636 | +$spot2-hover:var(--color-secondary70); | |
| 637 | +$spot3:var(--color-accent50); | |
| 638 | +$spot3-hover:var(--color-accent70); | |
| 639 | + | |
| 640 | +$pc-lg:1921px; | |
| 641 | +$pc:1920px; | |
| 642 | +$pc-sm:1570px; | |
| 643 | +$tablet-lg: 1333px; | |
| 644 | +$tablet: 1279px; | |
| 645 | +$tablet-sm: 1023px; | |
| 646 | +$mobile: 767px; | |
| 647 | +$mobile-sm: 480px; | |
| 648 | +$mobile-xsm: 374px; | |
| 649 | + | |
| 650 | +// $font-family: "Pretendard", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", | |
| 651 | +// "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; | |
| 652 | +$font-family: "Pretendard", Pretendard, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", | |
| 653 | +"Malgun Gothic", sans-serif; | |
| 654 | + | |
| 655 | +$url-img: '../images/'; | |
| 656 | + | |
| 657 | +$shadow-md: 0rem .4rem 1.6rem rgba($color-black, .1); | |
| 658 | +// $shadow-spot:0rem .4rem 1.6rem rgba($spot2, .1); | |
| 659 | +$shadow-sm: 0.2rem 0.2rem 0.4rem rgba($color-black, .1); | |
| 660 | + | |
| 661 | +$stroke-primary: $size-stroke-xsm solid $color-stroke-default-secondary; | |
| 662 | +$stroke-secondary: $size-stroke-xsm solid $color-stroke-default-tertiary; | |
| 663 | + | |
| 664 | +$gradient-brand-primary: linear-gradient(112deg, $color-primary50 20%, $color-primary40 80%);(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/base/_reset.scss
... | ... | @@ -0,0 +1,104 @@ |
| 1 | +* { | |
| 2 | + box-sizing: border-box; | |
| 3 | +} | |
| 4 | + | |
| 5 | +html, body, nav, section, article, figure, figcaption, | |
| 6 | +h1, h2, h3, h4, h5, h6, | |
| 7 | +menu, ul, ol, dl, li, dt, dd, | |
| 8 | +p, form { | |
| 9 | + margin: 0; | |
| 10 | + padding: 0; | |
| 11 | +} | |
| 12 | + | |
| 13 | +html, body { | |
| 14 | + height: 100%; | |
| 15 | +} | |
| 16 | + | |
| 17 | +html { | |
| 18 | + font-size: 62.5%; | |
| 19 | +} | |
| 20 | + | |
| 21 | +body { | |
| 22 | + background-color: $color-background-site; | |
| 23 | + font-family: $font-family; | |
| 24 | + @include typo('body-md'); | |
| 25 | + color: $color-font-default-primary; | |
| 26 | + letter-spacing: -0.025em; | |
| 27 | + line-height: $size-font-lineheight-md; | |
| 28 | + // user-select: none; | |
| 29 | + -webkit-font-smoothing: antialiased; | |
| 30 | + -webkit-text-size-adjust: none; | |
| 31 | + -webkit-font-smoothing: auto; | |
| 32 | + * { | |
| 33 | + @include customScroll; | |
| 34 | + outline-offset: -.2rem; | |
| 35 | + } | |
| 36 | +} | |
| 37 | + | |
| 38 | +// @media (any-pointer: coarse) { | |
| 39 | +// body { | |
| 40 | +// * { | |
| 41 | +// scrollbar-width: 0; | |
| 42 | +// &::-webkit-scrollbar { | |
| 43 | +// display: none; | |
| 44 | +// } | |
| 45 | +// } | |
| 46 | +// } | |
| 47 | +// } | |
| 48 | + | |
| 49 | +ul, | |
| 50 | +ol, | |
| 51 | +dl, | |
| 52 | +li { | |
| 53 | + list-style: none; | |
| 54 | +} | |
| 55 | +:focus:not(:focus-visible) { | |
| 56 | + outline: 0; | |
| 57 | +} | |
| 58 | + | |
| 59 | +a, a:link, a:visited { | |
| 60 | + text-decoration: none; | |
| 61 | + color: $color-font-default-primary; | |
| 62 | +} | |
| 63 | +button { | |
| 64 | + border: none; | |
| 65 | + background: none; | |
| 66 | + cursor:pointer; | |
| 67 | + padding:0; | |
| 68 | + &:disabled { | |
| 69 | + cursor: default; | |
| 70 | + } | |
| 71 | +} | |
| 72 | +i, | |
| 73 | +cite, | |
| 74 | +address { | |
| 75 | + font-style: normal; | |
| 76 | +} | |
| 77 | +em { | |
| 78 | + font-weight: $size-font-weight-xlg; | |
| 79 | + font-style: normal; | |
| 80 | + color:$color-font-brand-primary; | |
| 81 | + &.secondary { | |
| 82 | + color:$color-font-brand-secondary; | |
| 83 | + } | |
| 84 | + &.accent { | |
| 85 | + color:$color-font-brand-accent; | |
| 86 | + } | |
| 87 | +} | |
| 88 | +img { | |
| 89 | + margin: 0; | |
| 90 | + border: none; | |
| 91 | +} | |
| 92 | +iframe { | |
| 93 | + border: none; | |
| 94 | + outline: 0; | |
| 95 | +} | |
| 96 | +fieldset { | |
| 97 | + border: 0; | |
| 98 | + margin: 0; | |
| 99 | + padding: 0; | |
| 100 | + display: block; | |
| 101 | +} | |
| 102 | +fieldset legend { | |
| 103 | + @include hideElement; | |
| 104 | +} |
+++ resources/front/site/SITE_00000/css/common/component/_accordion.scss
... | ... | @@ -0,0 +1,229 @@ |
| 1 | +.btn-accordion-toggle { | |
| 2 | + position: absolute; | |
| 3 | + height: 100%; | |
| 4 | + width: 100%; | |
| 5 | + top: 0; | |
| 6 | + left: 0; | |
| 7 | + right: 0; | |
| 8 | + bottom: 0; | |
| 9 | + text-indent: -9999em; | |
| 10 | +} | |
| 11 | + | |
| 12 | +.accordion { | |
| 13 | + display: flex; | |
| 14 | + flex-direction: column; | |
| 15 | + gap:$spacing-xsm; | |
| 16 | + .is-active { | |
| 17 | + .accoridon-tit { | |
| 18 | + color: $spot; | |
| 19 | + font-weight: 700; | |
| 20 | + } | |
| 21 | + .accordion-tit-area { | |
| 22 | + background-color: $color-background-default-tertiary; | |
| 23 | + border:none; | |
| 24 | + } | |
| 25 | + .accordion-txt-area { | |
| 26 | + display: flex; | |
| 27 | + flex-direction: column; | |
| 28 | + gap:$spacing-md; | |
| 29 | + padding:1.6rem 0; | |
| 30 | + > * { | |
| 31 | + margin:0 !important; | |
| 32 | + } | |
| 33 | + } | |
| 34 | + } | |
| 35 | + .accordion-tit-area { | |
| 36 | + position: relative; | |
| 37 | + display: flex; | |
| 38 | + justify-content: space-between; | |
| 39 | + padding: $spacing-md 0; | |
| 40 | + | |
| 41 | + border: $stroke-secondary; | |
| 42 | + padding:1.6rem; | |
| 43 | + border-radius: $radius-sm; | |
| 44 | + .l-area, | |
| 45 | + .r-area { | |
| 46 | + display: flex; | |
| 47 | + gap:$spacing-xsm; | |
| 48 | + align-items: center; | |
| 49 | + } | |
| 50 | + | |
| 51 | + &:after { | |
| 52 | + content: " "; | |
| 53 | + position: absolute; | |
| 54 | + right: 4rem; | |
| 55 | + top: 50%; | |
| 56 | + margin-top: -1rem; | |
| 57 | + width: 2rem; | |
| 58 | + height: 2rem; | |
| 59 | + background-image: url('../../images/user/common/arr.svg'); | |
| 60 | + transition: transform 0.5s; | |
| 61 | + } | |
| 62 | + } | |
| 63 | + | |
| 64 | + .accoridon-tit { | |
| 65 | + display: inline-block; | |
| 66 | + vertical-align: middle; | |
| 67 | + font-size: 2rem; | |
| 68 | + box-sizing: border-box; | |
| 69 | + padding-left: 4rem; | |
| 70 | + padding-right: 8rem; | |
| 71 | + } | |
| 72 | + | |
| 73 | + .accordion-txt-area { | |
| 74 | + display: none; | |
| 75 | + } | |
| 76 | +} | |
| 77 | + | |
| 78 | +.accordion-list { | |
| 79 | + display: flex; | |
| 80 | + flex-direction: column; | |
| 81 | + gap: $spacing-xsm; | |
| 82 | + | |
| 83 | + >.is-active { | |
| 84 | + .accordion-tit-area { | |
| 85 | + &::after { | |
| 86 | + @include ico($size-icon-md, plus, $color-icon-default-secondary); | |
| 87 | + } | |
| 88 | + } | |
| 89 | + .accordion-txt-area { | |
| 90 | + transform: scaleY(1); | |
| 91 | + opacity: 1; | |
| 92 | + height:auto; | |
| 93 | + padding:$spacing-md; | |
| 94 | + transition: transform 0.3s ease, opacity 0.3s ease; | |
| 95 | + margin-top: $spacing-sm; | |
| 96 | + } | |
| 97 | + } | |
| 98 | + > li { | |
| 99 | + border:$stroke-secondary; | |
| 100 | + padding: $spacing-md $spacing-lg; | |
| 101 | + border-radius: $radius-sm; | |
| 102 | + &:has(.etc-fnc-area.is-active) { | |
| 103 | + position:relative; | |
| 104 | + z-index: 2; | |
| 105 | + } | |
| 106 | + } | |
| 107 | + .accordion-tit-area { | |
| 108 | + position: relative; | |
| 109 | + display: flex; | |
| 110 | + padding-right: calc($spacing-lg + $size-icon-md); | |
| 111 | + gap: $spacing-xsm; | |
| 112 | + align-items: center; | |
| 113 | + &:after { | |
| 114 | + content: " "; | |
| 115 | + position: absolute; | |
| 116 | + right: 0; | |
| 117 | + top: 50%; | |
| 118 | + transform: translateY(-50%); | |
| 119 | + @include ico($size-icon-md, remove, $color-icon-default-secondary); | |
| 120 | + } | |
| 121 | + } | |
| 122 | + | |
| 123 | + .accordion-tit { | |
| 124 | + display: block; | |
| 125 | + @include typo('tit-sm'); | |
| 126 | + flex:1; | |
| 127 | + p ~ * { | |
| 128 | + margin-top: $spacing-2xsm; | |
| 129 | + } | |
| 130 | + } | |
| 131 | + | |
| 132 | + .accordion-fnc { | |
| 133 | + position: relative; | |
| 134 | + z-index: 1; | |
| 135 | + } | |
| 136 | + | |
| 137 | + .accordion-txt-area { | |
| 138 | + height:0; | |
| 139 | + transform: scaleY(0); | |
| 140 | + transform-origin: top; | |
| 141 | + opacity: 0; | |
| 142 | + overflow: hidden; | |
| 143 | + transition: transform 0.3s ease, opacity 0.3s ease; | |
| 144 | + border-radius: $radius-sm; | |
| 145 | + background: $color-background-default-secondary; | |
| 146 | + color:$color-font-default-secondary; | |
| 147 | + img { | |
| 148 | + max-width: 100%; | |
| 149 | + } | |
| 150 | + } | |
| 151 | +} | |
| 152 | + | |
| 153 | +.accordion-nav { | |
| 154 | + display: flex; | |
| 155 | + flex-direction: column; | |
| 156 | + gap:$spacing-xsm; | |
| 157 | + .is-active { | |
| 158 | + .accoridon-tit { | |
| 159 | + color: $spot; | |
| 160 | + font-weight: 700; | |
| 161 | + } | |
| 162 | + .accordion-tit-area { | |
| 163 | + background-color: $color-background-default-tertiary; | |
| 164 | + border:none; | |
| 165 | + } | |
| 166 | + .accordion-txt-area { | |
| 167 | + display: flex; | |
| 168 | + flex-direction: column; | |
| 169 | + gap:$spacing-xsm; | |
| 170 | + padding:0.8rem 0; | |
| 171 | + > * { | |
| 172 | + margin:0 !important; | |
| 173 | + } | |
| 174 | + } | |
| 175 | + } | |
| 176 | + .accordion-tit-area { | |
| 177 | + position: relative; | |
| 178 | + display: flex; | |
| 179 | + justify-content: space-between; | |
| 180 | + padding: $spacing-md 0; | |
| 181 | + | |
| 182 | + border: $stroke-secondary; | |
| 183 | + padding:1.6rem; | |
| 184 | + border-radius: $radius-sm; | |
| 185 | + .l-area, | |
| 186 | + .r-area { | |
| 187 | + display: flex; | |
| 188 | + gap:$spacing-xsm; | |
| 189 | + align-items: center; | |
| 190 | + } | |
| 191 | + | |
| 192 | + &:after { | |
| 193 | + content: " "; | |
| 194 | + position: absolute; | |
| 195 | + right: 4rem; | |
| 196 | + top: 50%; | |
| 197 | + margin-top: -1rem; | |
| 198 | + width: 2rem; | |
| 199 | + height: 2rem; | |
| 200 | + background-image: url('../../images/user/common/arr.svg'); | |
| 201 | + transition: transform 0.5s; | |
| 202 | + } | |
| 203 | + } | |
| 204 | + | |
| 205 | + .accoridon-tit { | |
| 206 | + display: inline-block; | |
| 207 | + vertical-align: middle; | |
| 208 | + font-size: 2rem; | |
| 209 | + box-sizing: border-box; | |
| 210 | + padding-left: 4rem; | |
| 211 | + padding-right: 8rem; | |
| 212 | + } | |
| 213 | + | |
| 214 | + .accordion-txt-area { | |
| 215 | + display: none; | |
| 216 | + } | |
| 217 | +} | |
| 218 | + | |
| 219 | + | |
| 220 | +@include responsive(mobile) { | |
| 221 | + //반응형 true | |
| 222 | + [data-responsive="true"] { | |
| 223 | + .accordion-list { | |
| 224 | + > li { | |
| 225 | + padding:$spacing-sm; | |
| 226 | + } | |
| 227 | + } | |
| 228 | + } | |
| 229 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/component/_calendar.scss
... | ... | @@ -0,0 +1,139 @@ |
| 1 | +.calendar-area { | |
| 2 | + .calendar-header { | |
| 3 | + display: flex; | |
| 4 | + align-items: center; | |
| 5 | + justify-content: center; | |
| 6 | + gap:$spacing-lg; | |
| 7 | + margin-bottom: $spacing-lg; | |
| 8 | + .calendar-tit { | |
| 9 | + @include typo('tit-lg'); | |
| 10 | + } | |
| 11 | + } | |
| 12 | + .calendar-tbl { | |
| 13 | + font-size: $size-font-xsm; | |
| 14 | + border-collapse: separate; | |
| 15 | + tr { | |
| 16 | + th:first-of-type, | |
| 17 | + td:first-of-type .date { | |
| 18 | + color:$color-font-danger-primary; | |
| 19 | + } | |
| 20 | + } | |
| 21 | + thead { | |
| 22 | + th { | |
| 23 | + background-color: $color-background-default-secondary; | |
| 24 | + height: 3.2rem; | |
| 25 | + vertical-align: middle; | |
| 26 | + font-weight: $size-font-weight-md; | |
| 27 | + color: $color-font-default-tertiary; | |
| 28 | + &:first-of-type { | |
| 29 | + border-radius: $radius-sm 0 0 $radius-sm; | |
| 30 | + } | |
| 31 | + &:last-of-type { | |
| 32 | + border-radius: 0 $radius-sm $radius-sm 0; | |
| 33 | + } | |
| 34 | + } | |
| 35 | + &::after { | |
| 36 | + content: ""; | |
| 37 | + display: block; | |
| 38 | + height: $spacing-xsm; | |
| 39 | + } | |
| 40 | + } | |
| 41 | + tbody { | |
| 42 | + td { | |
| 43 | + position: relative; | |
| 44 | + border:$stroke-secondary; | |
| 45 | + border-top: none; | |
| 46 | + border-left: none; | |
| 47 | + height:8.8rem; | |
| 48 | + padding:$spacing-xsm; | |
| 49 | + overflow: hidden; | |
| 50 | + vertical-align: top; | |
| 51 | + text-align: left; | |
| 52 | + &:first-of-type { | |
| 53 | + border-left: $stroke-secondary; | |
| 54 | + } | |
| 55 | + .date { | |
| 56 | + width: 2.4rem; | |
| 57 | + height: 2.4rem; | |
| 58 | + display: flex; | |
| 59 | + align-items: center; | |
| 60 | + justify-content: center; | |
| 61 | + margin-bottom: $spacing-2xsm; | |
| 62 | + border-radius: $radius-sm; | |
| 63 | + } | |
| 64 | + &.is-today { | |
| 65 | + .date { | |
| 66 | + background-color: $color-background-brand-primary-inverse; | |
| 67 | + color: $color-font-default-primary-inverse !important; | |
| 68 | + } | |
| 69 | + } | |
| 70 | + &.is-active { | |
| 71 | + .date { | |
| 72 | + background-color: $color-background-brand-accent-inverse; | |
| 73 | + color: $color-font-default-primary-inverse; | |
| 74 | + } | |
| 75 | + } | |
| 76 | + } | |
| 77 | + tr { | |
| 78 | + &:first-of-type { | |
| 79 | + td { | |
| 80 | + border-top: $stroke-secondary; | |
| 81 | + &:first-of-type { | |
| 82 | + border-radius: $radius-sm 0 0 0; | |
| 83 | + } | |
| 84 | + &:last-of-type { | |
| 85 | + border-radius: 0 $radius-sm 0 0; | |
| 86 | + } | |
| 87 | + } | |
| 88 | + } | |
| 89 | + &:last-of-type { | |
| 90 | + td { | |
| 91 | + &first-of-type { | |
| 92 | + border-radius: 0 0 0 $radius-sm; | |
| 93 | + } | |
| 94 | + &:last-of-type { | |
| 95 | + border-radius: 0 0 $radius-sm 0; | |
| 96 | + } | |
| 97 | + } | |
| 98 | + } | |
| 99 | + } | |
| 100 | + } | |
| 101 | + } | |
| 102 | +} | |
| 103 | + | |
| 104 | +@include responsive(mobile) { | |
| 105 | + [data-responsive="true"] { | |
| 106 | + .calendar-area { | |
| 107 | + .calendar-header { | |
| 108 | + gap: $spacing-md; | |
| 109 | + margin-bottom: $spacing-md; | |
| 110 | + .calendar-tit { | |
| 111 | + @include typo('tit-md'); | |
| 112 | + } | |
| 113 | + } | |
| 114 | + .calendar-tbl { | |
| 115 | + tbody { | |
| 116 | + td { | |
| 117 | + padding: $spacing-2xsm; | |
| 118 | + height: 6.4rem; | |
| 119 | + .date { | |
| 120 | + width: 2rem; | |
| 121 | + height: 2rem; | |
| 122 | + border-radius: $radius-xsm; | |
| 123 | + @include typo('label-sm','em'); | |
| 124 | + } | |
| 125 | + .label-area { | |
| 126 | + gap: $spacing-3xsm; | |
| 127 | + .label { | |
| 128 | + width: 100%; | |
| 129 | + text-align: left; | |
| 130 | + justify-content: flex-start; | |
| 131 | + height: 1.6rem; | |
| 132 | + } | |
| 133 | + } | |
| 134 | + } | |
| 135 | + } | |
| 136 | + } | |
| 137 | + } | |
| 138 | + } | |
| 139 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/component/_component.scss
... | ... | @@ -0,0 +1,4009 @@ |
| 1 | +:root { | |
| 2 | + --component-group-spacing: #{$spacing-xsm}; | |
| 3 | + --flexarea-spacing: #{$spacing-xsm}; | |
| 4 | + --form-spacing: #{$spacing-xsm}; | |
| 5 | +} | |
| 6 | +@include responsive(moblie) { | |
| 7 | + //반응형 true | |
| 8 | + [data-responsive="true"]:root { | |
| 9 | + --component-group-spacing: #{$spacing-2xsm}; | |
| 10 | + --flexarea-spacing: #{$spacing-2xsm}; | |
| 11 | + --form-spacing: #{$spacing-2xsm}; | |
| 12 | + } | |
| 13 | +} | |
| 14 | +$flexarea-spacing: var(--flexarea-spacing); | |
| 15 | + | |
| 16 | +$wrap-sizes: ( | |
| 17 | + md: $size-wrap-md, | |
| 18 | + sm: $size-wrap-sm, | |
| 19 | + xsm: $size-wrap-xsm, | |
| 20 | + 2xsm: $size-wrap-2xsm | |
| 21 | +); | |
| 22 | + | |
| 23 | +.wrap { | |
| 24 | + max-width: calc($size-wrap + ($size-wrap-spacing * 2)); | |
| 25 | + margin: 0 auto; | |
| 26 | + padding-left: $size-wrap-spacing; | |
| 27 | + padding-right: $size-wrap-spacing; | |
| 28 | + width: 100%; | |
| 29 | + &.full { | |
| 30 | + max-width: none; | |
| 31 | + } | |
| 32 | + | |
| 33 | + @each $name, $size in $wrap-sizes { | |
| 34 | + &-#{$name} { | |
| 35 | + max-width: $size; | |
| 36 | + margin: 0 auto; | |
| 37 | + width: 100%; | |
| 38 | + padding-left: $size-wrap-spacing; | |
| 39 | + padding-right: $size-wrap-spacing; | |
| 40 | + } | |
| 41 | + .popup .wrap-#{$name}, | |
| 42 | + .wrap-#{$name} { | |
| 43 | + padding-left:0; | |
| 44 | + padding-right:0; | |
| 45 | + } | |
| 46 | + } | |
| 47 | +} | |
| 48 | +.pc { | |
| 49 | + display: block !important; | |
| 50 | +} | |
| 51 | +.pc-flex { | |
| 52 | + display: flex !important; | |
| 53 | +} | |
| 54 | +.pcta { | |
| 55 | + display: block !important; | |
| 56 | + | |
| 57 | +} | |
| 58 | +.pcta-flex { | |
| 59 | + display: flex !important; | |
| 60 | +} | |
| 61 | +.tamo, | |
| 62 | +.tamo-flex, | |
| 63 | +.mo, | |
| 64 | +.mo-flex { | |
| 65 | + display:none !important; | |
| 66 | +} | |
| 67 | + | |
| 68 | +img.is-disabled { | |
| 69 | + opacity: 0.25; | |
| 70 | + mix-blend-mode: luminosity; | |
| 71 | +} | |
| 72 | + | |
| 73 | +%none-txt { | |
| 74 | + position: absolute; | |
| 75 | + display: flex; | |
| 76 | + flex-direction: column; | |
| 77 | + top: 50%; | |
| 78 | + left: 50%; | |
| 79 | + width: calc(100% - 2.3rem); | |
| 80 | + transform: translate(-50%, -50%); | |
| 81 | + gap: 0.4rem; | |
| 82 | + align-items: center; | |
| 83 | + text-align: center; | |
| 84 | + figure { | |
| 85 | + margin-bottom: 1.6rem; | |
| 86 | + } | |
| 87 | + em { | |
| 88 | + font-size: 1.6rem; | |
| 89 | + font-weight: 400; | |
| 90 | + } | |
| 91 | + p { | |
| 92 | + font-size: 1.2rem; | |
| 93 | + color: $color-font-default-tertiary; | |
| 94 | + } | |
| 95 | +} | |
| 96 | + | |
| 97 | +.none-txt { | |
| 98 | + @extend %none-txt; | |
| 99 | +} | |
| 100 | + | |
| 101 | +ul.pagenation, | |
| 102 | +ol.pagenation { | |
| 103 | + display: flex; | |
| 104 | + margin-top:$spacing-2xlg; | |
| 105 | + gap: $spacing-2xsm; | |
| 106 | + justify-content: center; | |
| 107 | + align-items: center; | |
| 108 | + li { | |
| 109 | + &.pv { | |
| 110 | + margin-right: $spacing-2xsm; | |
| 111 | + } | |
| 112 | + &.fw { | |
| 113 | + margin-left: $spacing-2xsm; | |
| 114 | + } | |
| 115 | + span, | |
| 116 | + a { | |
| 117 | + display: inline-flex; | |
| 118 | + justify-content: center; | |
| 119 | + align-items: center; | |
| 120 | + text-decoration: none; | |
| 121 | + font-weight: $size-font-weight-lg; | |
| 122 | + height: 3.6rem; | |
| 123 | + min-width: 3.6rem; | |
| 124 | + padding: $spacing-xsm; | |
| 125 | + border-radius: 1.8rem; | |
| 126 | + color:$color-font-default-quaternary; | |
| 127 | + &:hover { | |
| 128 | + color: $color-font-default-secondary; | |
| 129 | + background-color: $color-background-default-tertiary; | |
| 130 | + } | |
| 131 | + } | |
| 132 | + &.is-active, | |
| 133 | + &.current { | |
| 134 | + span, | |
| 135 | + a,a:hover { | |
| 136 | + color: $color-font-brand-primary; | |
| 137 | + background-color: $color-background-brand-primary; | |
| 138 | + font-weight: $size-font-weight-xlg; | |
| 139 | + } | |
| 140 | + } | |
| 141 | + } | |
| 142 | +} | |
| 143 | + | |
| 144 | +ul.page-indicator, | |
| 145 | +ol.page-indicator { | |
| 146 | + display: flex; | |
| 147 | + gap: $spacing-xsm; | |
| 148 | + justify-content: center; | |
| 149 | + align-items: center; | |
| 150 | + li { | |
| 151 | + a { | |
| 152 | + display: block; | |
| 153 | + width: 0.6rem; | |
| 154 | + height: 0.6rem; | |
| 155 | + padding: 0.6rem 0 0 0; | |
| 156 | + border-radius: 50%; | |
| 157 | + overflow: hidden; | |
| 158 | + // clip-path: polygon(0 0, 100% 0, 100% 100%, 0 1 00%); | |
| 159 | + background-color: $color-background-default-tertiary; | |
| 160 | + } | |
| 161 | + &.current { | |
| 162 | + a { | |
| 163 | + background: $color-background-brand-accent-inverse; | |
| 164 | + } | |
| 165 | + } | |
| 166 | + } | |
| 167 | + @for $i from 1 through 10 { | |
| 168 | + &[data-current="#{$i}"] { | |
| 169 | + li:nth-of-type(#{$i}) { | |
| 170 | + a { | |
| 171 | + background: $color-background-brand-accent-inverse; | |
| 172 | + } | |
| 173 | + } | |
| 174 | + } | |
| 175 | + } | |
| 176 | +} | |
| 177 | + | |
| 178 | +.search-area { | |
| 179 | + display: inline-flex; | |
| 180 | + // flex-wrap: wrap; | |
| 181 | + gap:0; | |
| 182 | + border:$stroke-primary; | |
| 183 | + border-radius: $radius-sm; | |
| 184 | + min-width: 0; | |
| 185 | + label { | |
| 186 | + @include hideElement; | |
| 187 | + } | |
| 188 | + .search-option { | |
| 189 | + display: flex; | |
| 190 | + // flex-wrap: wrap; | |
| 191 | + select { | |
| 192 | + border:none; | |
| 193 | + padding-left: 1.2rem; | |
| 194 | + padding-right: calc(1.6rem + var(--size-icon-md)); | |
| 195 | + background-position: right 0.8rem center; | |
| 196 | + border-radius: $radius-none; | |
| 197 | + & ~ select { | |
| 198 | + border-left: $stroke-secondary; | |
| 199 | + } | |
| 200 | + } | |
| 201 | + border-right: $stroke-secondary; | |
| 202 | + } | |
| 203 | + .search { | |
| 204 | + position: relative; | |
| 205 | + display: flex; | |
| 206 | + flex:1; | |
| 207 | + gap:0; | |
| 208 | + min-width: 0; | |
| 209 | + input { | |
| 210 | + padding-right:4.8rem; | |
| 211 | + border:none; | |
| 212 | + flex:1; | |
| 213 | + min-width:0; | |
| 214 | + &:focus { | |
| 215 | + box-shadow: none; | |
| 216 | + } | |
| 217 | + @at-root .search-area:has(.search input:focus) { | |
| 218 | + border-color: $color-stroke-brand-primary; | |
| 219 | + } | |
| 220 | + } | |
| 221 | + button.btn { | |
| 222 | + position: absolute; | |
| 223 | + right:0; | |
| 224 | + top:0; | |
| 225 | + justify-content: flex-start; | |
| 226 | + width: $form-height-md; | |
| 227 | + height: $form-height-md; | |
| 228 | + border-radius: $radius-none; | |
| 229 | + min-width: auto; | |
| 230 | + padding: $spacing-sm; | |
| 231 | + border:none; | |
| 232 | + white-space: nowrap; | |
| 233 | + overflow:hidden; | |
| 234 | + background-color: transparent; | |
| 235 | + font-size:0; | |
| 236 | + } | |
| 237 | + } | |
| 238 | + | |
| 239 | + & + .msg { | |
| 240 | + display: block; | |
| 241 | + margin-top: $spacing-2xsm; | |
| 242 | + @include typo('body-sm'); | |
| 243 | + color: $color-font-default-quaternary; | |
| 244 | + } | |
| 245 | + &.small,&.sm { | |
| 246 | + select, | |
| 247 | + input, | |
| 248 | + button.btn { | |
| 249 | + height: 3.6rem; | |
| 250 | + } | |
| 251 | + .search { | |
| 252 | + input { | |
| 253 | + padding-right:3.6rem; | |
| 254 | + } | |
| 255 | + button.btn { | |
| 256 | + width: 3.6rem; | |
| 257 | + padding: $spacing-xsm; | |
| 258 | + } | |
| 259 | + } | |
| 260 | + select { | |
| 261 | + background-size: $size-icon-sm; | |
| 262 | + } | |
| 263 | + } | |
| 264 | + &.full { | |
| 265 | + width:100%; | |
| 266 | + .search { | |
| 267 | + flex:1; | |
| 268 | + input { | |
| 269 | + flex:1; | |
| 270 | + } | |
| 271 | + } | |
| 272 | + } | |
| 273 | +} | |
| 274 | +label.input-form + .search-area { | |
| 275 | + margin-top: $spacing-xsm; | |
| 276 | +} | |
| 277 | + | |
| 278 | +.search-cus-area { | |
| 279 | + display: flex; | |
| 280 | + overflow: hidden; | |
| 281 | + height: 6.2rem; | |
| 282 | + | |
| 283 | + label { | |
| 284 | + border: $stroke-secondary; | |
| 285 | + border-radius: $radius-sm 0 0 $radius-sm; | |
| 286 | + position: relative; | |
| 287 | + display: flex; | |
| 288 | + flex: 1; | |
| 289 | + background-color: $color-background-default-secondary; | |
| 290 | + padding-left: 6.4rem; | |
| 291 | + min-width: 0; | |
| 292 | + overflow: hidden; | |
| 293 | + input[type=text] { | |
| 294 | + border: none; | |
| 295 | + border-radius: $radius-none; | |
| 296 | + width: auto; | |
| 297 | + height: 100%; | |
| 298 | + flex: 1; | |
| 299 | + font-size: $size-font-lg; | |
| 300 | + font-weight: $size-font-weight-xlg; | |
| 301 | + color: $color-background-default-primary-inverse; | |
| 302 | + &::placeholder { | |
| 303 | + color: $color-gray40; | |
| 304 | + } | |
| 305 | + } | |
| 306 | + &::before { | |
| 307 | + content: ""; | |
| 308 | + left: 2rem; | |
| 309 | + top: 50%; | |
| 310 | + margin-top: -1rem; | |
| 311 | + position: absolute; | |
| 312 | + @include ico($size-icon-md, search); | |
| 313 | + } | |
| 314 | + } | |
| 315 | + button { | |
| 316 | + display: inline-flex; | |
| 317 | + padding:0 $spacing-lg; | |
| 318 | + align-items: center; | |
| 319 | + justify-content: center; | |
| 320 | + font-size: var(--fs-lg); | |
| 321 | + font-weight: $size-font-weight-xlg; | |
| 322 | + color:$color-font-default-primary-inverse; | |
| 323 | + background: linear-gradient(-90deg, $color-primary70 0%, $color-primary50 100%); | |
| 324 | + border-radius: 0 $radius-sm $radius-sm 0; | |
| 325 | + transition: all .4s; | |
| 326 | + &:hover { | |
| 327 | + background: linear-gradient(0deg, $color-primary70 90%, $color-primary50 100%); | |
| 328 | + box-shadow: $shadow-md; | |
| 329 | + } | |
| 330 | + } | |
| 331 | +} | |
| 332 | + | |
| 333 | +.total-search-area { | |
| 334 | + display: flex; | |
| 335 | + padding-bottom: $spacing-lg; | |
| 336 | + justify-content: flex-end; | |
| 337 | + align-items: center; | |
| 338 | + gap: $spacing-2xsm; | |
| 339 | + | |
| 340 | + .search-area { | |
| 341 | + border: none; | |
| 342 | + } | |
| 343 | + | |
| 344 | + .search { | |
| 345 | + input { | |
| 346 | + width: 32rem; | |
| 347 | + background-color: $color-background-default-secondary; | |
| 348 | + } | |
| 349 | + } | |
| 350 | + .btn-group { | |
| 351 | + flex:none; | |
| 352 | + } | |
| 353 | +} | |
| 354 | + | |
| 355 | +.accessibility { | |
| 356 | + position: relative; | |
| 357 | + text-align: center; | |
| 358 | + a { | |
| 359 | + position: absolute; | |
| 360 | + z-index: 9999; | |
| 361 | + height: 0.1rem; | |
| 362 | + overflow: hidden; | |
| 363 | + &:focus { | |
| 364 | + height: auto; | |
| 365 | + padding: $spacing-md; | |
| 366 | + background: $color-background-brand-primary-inverse; | |
| 367 | + color: $color-font-default-primary-inverse; | |
| 368 | + } | |
| 369 | + } | |
| 370 | +} | |
| 371 | +.msg { | |
| 372 | + @include typo('body-sm'); | |
| 373 | + vertical-align: middle; | |
| 374 | + @each $key, $colors in $state-colors { | |
| 375 | + &#{if($key == "default", "", ".#{$key}")} { | |
| 376 | + color: map-get($colors, font); | |
| 377 | + i[class^=ico-] { | |
| 378 | + margin-right: $spacing-3xsm; | |
| 379 | + margin-top: -0.2rem; | |
| 380 | + &::before { | |
| 381 | + background-color: map-get($colors, icon); | |
| 382 | + } | |
| 383 | + } | |
| 384 | + } | |
| 385 | + } | |
| 386 | +} | |
| 387 | +.tooltip { | |
| 388 | + position: relative; | |
| 389 | + display: inline-block; | |
| 390 | + | |
| 391 | + .btn-tooltip { | |
| 392 | + position: relative; | |
| 393 | + color:$color-font-default-tertiary; | |
| 394 | + z-index:0; | |
| 395 | + i { | |
| 396 | + position: relative; | |
| 397 | + z-index: -1; | |
| 398 | + } | |
| 399 | + } | |
| 400 | + .txt-area { | |
| 401 | + display: none; | |
| 402 | + position:absolute; | |
| 403 | + z-index: 1; | |
| 404 | + transform: translateX(-50%); | |
| 405 | + left:50%; | |
| 406 | + margin-top:$spacing-xsm; | |
| 407 | + background-color: $color-background-default-primary; | |
| 408 | + border:1px solid $color-stroke-default-primary; | |
| 409 | + @include typo('body-sm'); | |
| 410 | + padding:$spacing-xsm; | |
| 411 | + border-radius: $radius-sm; | |
| 412 | + width: max-content; | |
| 413 | + max-width: 16rem; | |
| 414 | + } | |
| 415 | + &.is-active { | |
| 416 | + .txt-area { | |
| 417 | + display: block; | |
| 418 | + } | |
| 419 | + } | |
| 420 | + &.dir-l { | |
| 421 | + .txt-area { | |
| 422 | + left:0; | |
| 423 | + transform: translateX(0); | |
| 424 | + } | |
| 425 | + | |
| 426 | + } | |
| 427 | + &.dir-r { | |
| 428 | + .txt-area { | |
| 429 | + transform: translateX(0); | |
| 430 | + left:initial; | |
| 431 | + right:0; | |
| 432 | + } | |
| 433 | + } | |
| 434 | +} | |
| 435 | +.txt-hide { | |
| 436 | + @include hideElement(); | |
| 437 | +} | |
| 438 | +.margin { | |
| 439 | + $sizes: ( | |
| 440 | + xsm: .4, | |
| 441 | + sm: .8, | |
| 442 | + md: 1.6, | |
| 443 | + lg : 2.4, | |
| 444 | + xlg : 4 | |
| 445 | + ); | |
| 446 | + $directions: ( | |
| 447 | + top, | |
| 448 | + right, | |
| 449 | + bottom, | |
| 450 | + left | |
| 451 | + ); | |
| 452 | + @each $direction in $directions { | |
| 453 | + &-#{$direction} { | |
| 454 | + @each $key, $size in $sizes { | |
| 455 | + &-#{$key}{ | |
| 456 | + margin-#{$direction}: #{$size} + 'rem' !important; | |
| 457 | + } | |
| 458 | + } | |
| 459 | + } | |
| 460 | + } | |
| 461 | +} | |
| 462 | +.percent-width { | |
| 463 | + @for $i from 0 through 10 { | |
| 464 | + &#{$i} { | |
| 465 | + min-width: 0 !important; | |
| 466 | + width: #{$i*10} + '%' !important; | |
| 467 | + } | |
| 468 | + } | |
| 469 | +} | |
| 470 | +.align { | |
| 471 | + &-center { | |
| 472 | + text-align: center !important; | |
| 473 | + } | |
| 474 | + &-left { | |
| 475 | + text-align: left !important; | |
| 476 | + } | |
| 477 | + &-right { | |
| 478 | + text-align: right !important; | |
| 479 | + } | |
| 480 | +} | |
| 481 | +.valign { | |
| 482 | + &-top { | |
| 483 | + vertical-align: top !important; | |
| 484 | + } | |
| 485 | + &-middle { | |
| 486 | + vertical-align: middle !important; | |
| 487 | + } | |
| 488 | + &-bottom { | |
| 489 | + vertical-align: bottom !important; | |
| 490 | + } | |
| 491 | +} | |
| 492 | +.font-color { | |
| 493 | + $colors : ( | |
| 494 | + "blue" : $color-primary60, | |
| 495 | + "green" : $color-green60, | |
| 496 | + "pink" : $color-pink60, | |
| 497 | + "orange" : $color-orange60, | |
| 498 | + "red" : $color-red60, | |
| 499 | + "black" : $color-black, | |
| 500 | + "gray" : $color-gray60, | |
| 501 | + "white" : $color-white, | |
| 502 | + "success": $color-font-success-primary, | |
| 503 | + "warning": $color-font-warning-primary, | |
| 504 | + "info": $color-font-info-primary, | |
| 505 | + "danger": $color-font-danger-primary, | |
| 506 | + 'spot' : $color-font-brand-primary, | |
| 507 | + 'primary' : $color-font-brand-primary, | |
| 508 | + 'spot2' : $color-font-brand-secondary, | |
| 509 | + 'secondary' : $color-font-brand-secondary, | |
| 510 | + 'spot3' : $color-font-brand-accent, | |
| 511 | + 'accent' : $color-font-brand-accent, | |
| 512 | + 'default-primary': $color-font-default-primary, | |
| 513 | + 'default-secondary': $color-font-default-secondary, | |
| 514 | + 'default-tertiary': $color-font-default-tertiary, | |
| 515 | + "disabled": $color-font-disabled-primary, | |
| 516 | + "positive": $color-green60, | |
| 517 | + "negative": $color-red60 | |
| 518 | + ); | |
| 519 | + @each $key, $color in $colors { | |
| 520 | + &-#{$key} { | |
| 521 | + color: $color !important; | |
| 522 | + } | |
| 523 | + } | |
| 524 | +} | |
| 525 | +.font-size { | |
| 526 | + $sizes : ( | |
| 527 | + 'sm' : $size-font-xsm, | |
| 528 | + 'md' : $size-font-sm, | |
| 529 | + 'lg' : $size-font-md, | |
| 530 | + 'xlg' : $size-font-xlg | |
| 531 | + ); | |
| 532 | + @each $key, $size in $sizes { | |
| 533 | + &-#{$key} { | |
| 534 | + font-size: $size !important; | |
| 535 | + } | |
| 536 | + } | |
| 537 | +} | |
| 538 | +%flexArea { | |
| 539 | + display: flex; | |
| 540 | + justify-content: space-between; | |
| 541 | + gap:$spacing-xsm; | |
| 542 | + &.lg { | |
| 543 | + gap:$spacing-xsm $spacing-md; | |
| 544 | + } | |
| 545 | + &.sm { | |
| 546 | + gap: $spacing-2xsm; | |
| 547 | + } | |
| 548 | + .l-area, | |
| 549 | + .c-area, | |
| 550 | + .r-area { | |
| 551 | + display: flex; | |
| 552 | + flex-wrap: wrap; | |
| 553 | + align-items: center; | |
| 554 | + gap:$spacing-2xsm $flexarea-spacing; | |
| 555 | + > * { | |
| 556 | + margin-bottom: 0; | |
| 557 | + } | |
| 558 | + &:only-child { | |
| 559 | + flex:1; | |
| 560 | + } | |
| 561 | + .checkradio { | |
| 562 | + margin-right: 0; | |
| 563 | + } | |
| 564 | + &:empty { | |
| 565 | + display: none; | |
| 566 | + } | |
| 567 | + } | |
| 568 | + .r-area { | |
| 569 | + justify-content: flex-end; | |
| 570 | + } | |
| 571 | + &.center { | |
| 572 | + justify-content: center; | |
| 573 | + } | |
| 574 | + &.vcenter { | |
| 575 | + align-items: center; | |
| 576 | + } | |
| 577 | + .dir-col { | |
| 578 | + align-items: flex-start; | |
| 579 | + } | |
| 580 | +} | |
| 581 | +.page-tit-area, | |
| 582 | +.page-fnc-area, | |
| 583 | +.section-tit-area, | |
| 584 | +.tit-area, | |
| 585 | +.tit-box-area, | |
| 586 | +.tit-border-area, | |
| 587 | +.fnc-area, | |
| 588 | +.flex-area { | |
| 589 | + @extend %flexArea; | |
| 590 | + width: 100%; | |
| 591 | + .l-area, | |
| 592 | + .c-area, | |
| 593 | + .r-area { | |
| 594 | + > * { | |
| 595 | + margin-bottom: 0; | |
| 596 | + } | |
| 597 | + } | |
| 598 | + &.border-bottom { | |
| 599 | + border-bottom: $stroke-secondary; | |
| 600 | + padding-bottom: $spacing-md; | |
| 601 | + } | |
| 602 | + .r-area { | |
| 603 | + margin-left: auto; | |
| 604 | + } | |
| 605 | +} | |
| 606 | +.page-tit-area, | |
| 607 | +.page-fnc-area { | |
| 608 | + margin-bottom: $spacing-2xlg; | |
| 609 | + flex-wrap: wrap; | |
| 610 | +} | |
| 611 | +.section-tit-area { | |
| 612 | + margin-bottom: $spacing-lg; | |
| 613 | + flex-wrap: wrap; | |
| 614 | +} | |
| 615 | +.tit-area, | |
| 616 | +.fnc-area { | |
| 617 | + margin-bottom: $spacing-md; | |
| 618 | + align-items: flex-end; | |
| 619 | + flex-wrap: wrap; | |
| 620 | +} | |
| 621 | +.tit-box-area { | |
| 622 | + padding: $spacing-md $spacing-2xlg; | |
| 623 | + border-radius: $radius-md; | |
| 624 | + background: $color-background-brand-primary; | |
| 625 | + margin-bottom: $spacing-2xlg; | |
| 626 | +} | |
| 627 | +.tit-border-area { | |
| 628 | + border:$stroke-secondary; | |
| 629 | + padding:$spacing-lg; | |
| 630 | + | |
| 631 | +} | |
| 632 | +.flex-area { | |
| 633 | + justify-content: flex-start; | |
| 634 | + > * { | |
| 635 | + margin:0 !important; | |
| 636 | + } | |
| 637 | + .l-area, | |
| 638 | + .r-area { | |
| 639 | + flex:1; | |
| 640 | + } | |
| 641 | +} | |
| 642 | +.block-area { | |
| 643 | + > * { | |
| 644 | + display: block; | |
| 645 | + } | |
| 646 | +} | |
| 647 | +.fnc-extend-area { | |
| 648 | + margin-bottom: $spacing-lg; | |
| 649 | + .fnc-tit { | |
| 650 | + flex:none; | |
| 651 | + @include typo('tit-sm'); | |
| 652 | + } | |
| 653 | + .extend-keyword-area { | |
| 654 | + display: flex; | |
| 655 | + // flex-wrap: wrap; | |
| 656 | + gap:$spacing-xsm $spacing-xlg; | |
| 657 | + padding: $spacing-md 0; | |
| 658 | + align-items: center; | |
| 659 | + border-bottom: $stroke-secondary; | |
| 660 | + .txt-area { | |
| 661 | + display: flex; | |
| 662 | + flex-wrap: wrap; | |
| 663 | + gap:$spacing-xsm $spacing-lg; | |
| 664 | + a { | |
| 665 | + color:$color-font-brand-primary; | |
| 666 | + font-weight: $size-font-weight-xlg; | |
| 667 | + } | |
| 668 | + } | |
| 669 | + } | |
| 670 | + .extend-default-area, | |
| 671 | + .extend-filter-area, | |
| 672 | + .extend-fnc-area { | |
| 673 | + @extend %flexArea; | |
| 674 | + .l-area, | |
| 675 | + .r-area { | |
| 676 | + > * { | |
| 677 | + margin:0; | |
| 678 | + } | |
| 679 | + } | |
| 680 | + } | |
| 681 | + .extend-default-area { | |
| 682 | + padding: $spacing-sm 0; | |
| 683 | + border-bottom: $stroke-secondary; | |
| 684 | + .l-area, | |
| 685 | + .r-area { | |
| 686 | + gap:$spacing-xsm $spacing-xsm; | |
| 687 | + min-height: 4.8rem; | |
| 688 | + } | |
| 689 | + } | |
| 690 | + .extend-filter-area { | |
| 691 | + padding: $spacing-xsm $spacing-md; | |
| 692 | + background-color: $color-background-brand-primary; | |
| 693 | + .l-area, | |
| 694 | + .r-area { | |
| 695 | + gap: $spacing-xsm; | |
| 696 | + min-height: 4.8rem; | |
| 697 | + .checkradio { | |
| 698 | + margin-right: $spacing-xsm; | |
| 699 | + } | |
| 700 | + } | |
| 701 | + .filter-group, | |
| 702 | + .form-group { | |
| 703 | + margin-right: $spacing-xsm; | |
| 704 | + display: flex; | |
| 705 | + gap: $spacing-xsm; | |
| 706 | + flex-wrap: wrap; | |
| 707 | + &:last-child { | |
| 708 | + margin-right: 0; | |
| 709 | + } | |
| 710 | + | |
| 711 | + } | |
| 712 | + .filter-group { | |
| 713 | + align-items: center; | |
| 714 | + &:has(.form-tit) { | |
| 715 | + width: 100%; | |
| 716 | + gap: $spacing-md; | |
| 717 | + .form-group { | |
| 718 | + flex:1; | |
| 719 | + .form-tit { | |
| 720 | + flex:none; | |
| 721 | + } | |
| 722 | + } | |
| 723 | + } | |
| 724 | + select, input { | |
| 725 | + background-color: transparent; | |
| 726 | + } | |
| 727 | + } | |
| 728 | + } | |
| 729 | + .extend-fnc-area { | |
| 730 | + padding-top: $spacing-md; | |
| 731 | + } | |
| 732 | +} | |
| 733 | +.form-tit { | |
| 734 | + all: unset; /* 기본 스타일 제거 */ | |
| 735 | + display: block; /* 블록 요소로 변경 */ | |
| 736 | + flex: none; | |
| 737 | + unicode-bidi: normal; | |
| 738 | + @include typo('tit-xsm'); | |
| 739 | +} | |
| 740 | +.order0 { | |
| 741 | + order:0 !important; | |
| 742 | +} | |
| 743 | +.dir-col { | |
| 744 | + flex-direction: column !important; | |
| 745 | +} | |
| 746 | +.flex1 { | |
| 747 | + flex:1; | |
| 748 | +} | |
| 749 | +.fnc-list { | |
| 750 | + li { | |
| 751 | + display: flex; | |
| 752 | + padding:$spacing-sm $spacing-md; | |
| 753 | + border-bottom: $stroke-secondary; | |
| 754 | + align-items: center; | |
| 755 | + gap:$spacing-xsm; | |
| 756 | + min-height: 6.4rem; | |
| 757 | + &:last-child { | |
| 758 | + border-bottom: none; | |
| 759 | + } | |
| 760 | + } | |
| 761 | + i, | |
| 762 | + .fnc { | |
| 763 | + flex:none; | |
| 764 | + } | |
| 765 | + .txt-area { | |
| 766 | + flex:1; | |
| 767 | + } | |
| 768 | + .fnc-tit { | |
| 769 | + font-size: $size-font-sm; | |
| 770 | + font-weight: $size-font-weight-lg; | |
| 771 | + color: $color-font-default-primary; | |
| 772 | + vertical-align: middle; | |
| 773 | + } | |
| 774 | + p { | |
| 775 | + color: $color-font-default-secondary; | |
| 776 | + } | |
| 777 | + .fnc { | |
| 778 | + display: flex; | |
| 779 | + align-items: center; | |
| 780 | + gap:$spacing-xsm; | |
| 781 | + } | |
| 782 | + &.border { | |
| 783 | + border:$stroke-secondary; | |
| 784 | + background-color: $color-background-default-primary; | |
| 785 | + border-radius: $radius-md; | |
| 786 | + >li:last-of-type { | |
| 787 | + border-bottom: none; | |
| 788 | + } | |
| 789 | + } | |
| 790 | + &.box { | |
| 791 | + display:grid; | |
| 792 | + gap:$spacing-xsm; | |
| 793 | + li { | |
| 794 | + border-radius: $radius-md; | |
| 795 | + background: $color-background-default-primary; | |
| 796 | + min-height: 10rem; | |
| 797 | + border:none; | |
| 798 | + padding:$spacing-lg; | |
| 799 | + } | |
| 800 | + } | |
| 801 | +} | |
| 802 | +.title-xlg, | |
| 803 | +.title-lg, | |
| 804 | +.title, | |
| 805 | +.title-sm, | |
| 806 | +.title-xsm, | |
| 807 | +.title-label { | |
| 808 | + &:last-child, | |
| 809 | + &:only-child { | |
| 810 | + margin-bottom: 0; | |
| 811 | + } | |
| 812 | +} | |
| 813 | +.title-xlg { | |
| 814 | + @include typo('tit-xlg'); | |
| 815 | + margin-bottom: $spacing-2xlg; | |
| 816 | +} | |
| 817 | +.title-lg { | |
| 818 | + @include typo('tit-lg'); | |
| 819 | + margin-bottom: $spacing-lg; | |
| 820 | +} | |
| 821 | +.title { | |
| 822 | + @include typo('tit-md'); | |
| 823 | + margin-bottom: $spacing-md; | |
| 824 | +} | |
| 825 | +.title-sm { | |
| 826 | + @include typo('tit-sm'); | |
| 827 | + margin-bottom: $spacing-xsm; | |
| 828 | +} | |
| 829 | +.title-xsm { | |
| 830 | + @include typo('tit-xsm'); | |
| 831 | + margin-bottom: $spacing-xsm; | |
| 832 | +} | |
| 833 | +.title-label { | |
| 834 | + @include typo('tit-label'); | |
| 835 | + margin-bottom: $spacing-xsm; | |
| 836 | +} | |
| 837 | +.txt-sub { | |
| 838 | + color:$color-font-default-secondary; | |
| 839 | + word-break: keep-all; | |
| 840 | +} | |
| 841 | + | |
| 842 | +.lnb { | |
| 843 | + margin-bottom: $spacing-2xlg; | |
| 844 | + ul { | |
| 845 | + display: flex; | |
| 846 | + align-items: center; | |
| 847 | + li { | |
| 848 | + @include typo('tit-lg'); | |
| 849 | + &::after { | |
| 850 | + content: " "; | |
| 851 | + display: inline-block; | |
| 852 | + width: 0.3rem; | |
| 853 | + background-color: $color-background-brand-primary; | |
| 854 | + height: 2rem; | |
| 855 | + transform: rotate(45deg); | |
| 856 | + margin:0 2rem; | |
| 857 | + } | |
| 858 | + &:last-child { | |
| 859 | + &::after { | |
| 860 | + display: none; | |
| 861 | + } | |
| 862 | + } | |
| 863 | + a { | |
| 864 | + position: relative; | |
| 865 | + display: inline-block; | |
| 866 | + &:hover{ | |
| 867 | + color:$color-font-brand-secondary; | |
| 868 | + &::before { | |
| 869 | + background-color: $color-background-brand-secondary; | |
| 870 | + width: 100%; | |
| 871 | + } | |
| 872 | + } | |
| 873 | + &::before { | |
| 874 | + content: " "; | |
| 875 | + position: absolute; | |
| 876 | + bottom:0; | |
| 877 | + left:50%; | |
| 878 | + height: 8px; | |
| 879 | + width: 0; | |
| 880 | + transition: all .3s; | |
| 881 | + transform: translateX(-50%); | |
| 882 | + z-index: -1; | |
| 883 | + } | |
| 884 | + &.is-current { | |
| 885 | + color:$color-font-brand-primary; | |
| 886 | + &::before { | |
| 887 | + background-color: $color-background-brand-primary; | |
| 888 | + width: 100%; | |
| 889 | + } | |
| 890 | + } | |
| 891 | + } | |
| 892 | + } | |
| 893 | + } | |
| 894 | +} | |
| 895 | + | |
| 896 | +.summary { | |
| 897 | + display: flex; | |
| 898 | + align-items: center; | |
| 899 | + gap: $spacing-md; | |
| 900 | + padding: $spacing-sm $spacing-md; | |
| 901 | + border-radius: $radius-sm; | |
| 902 | + margin-bottom: $spacing-lg; | |
| 903 | + | |
| 904 | + // &:last-of-type { | |
| 905 | + // margin-bottom: 0; | |
| 906 | + // } | |
| 907 | + i { | |
| 908 | + flex: none; | |
| 909 | + } | |
| 910 | + | |
| 911 | + .txt-area { | |
| 912 | + display: flex; | |
| 913 | + flex-direction: column; | |
| 914 | + gap: $spacing-3xsm; | |
| 915 | + } | |
| 916 | + | |
| 917 | + cite, | |
| 918 | + .summary-tit { | |
| 919 | + @include typo('tit-xsm'); | |
| 920 | + } | |
| 921 | + | |
| 922 | + @each $key, $colors in $state-colors { | |
| 923 | + &#{if($key == "default", "", ".#{$key}")} { | |
| 924 | + color: map-get($colors, font); | |
| 925 | + background-color: map-get($colors, bg); | |
| 926 | + | |
| 927 | + i[class^=ico-] { | |
| 928 | + &::before { | |
| 929 | + background-color: map-get($colors, icon); | |
| 930 | + } | |
| 931 | + } | |
| 932 | + } | |
| 933 | +} | |
| 934 | +} | |
| 935 | + | |
| 936 | +.summary-img { | |
| 937 | + display: flex; | |
| 938 | + align-items: center; | |
| 939 | + gap: $spacing-md; | |
| 940 | + padding: $spacing-md; | |
| 941 | + border-radius: $radius-sm; | |
| 942 | + background: $color-background-brand-primary; | |
| 943 | + margin-bottom: $spacing-lg; | |
| 944 | + | |
| 945 | + .img-area { | |
| 946 | + width: 6.4rem; | |
| 947 | + | |
| 948 | + img { | |
| 949 | + display: block; | |
| 950 | + width: 100%; | |
| 951 | + } | |
| 952 | + } | |
| 953 | + | |
| 954 | + .txt-area { | |
| 955 | + flex: 1; | |
| 956 | + display: flex; | |
| 957 | + flex-direction: column; | |
| 958 | + gap: $spacing-3xsm; | |
| 959 | + } | |
| 960 | + | |
| 961 | + .summary-tit { | |
| 962 | + @include typo('tit-md'); | |
| 963 | + } | |
| 964 | + | |
| 965 | + .summary-tit-sm { | |
| 966 | + @include typo('tit-sm'); | |
| 967 | + color: $color-font-default-tertiary; | |
| 968 | + } | |
| 969 | +} | |
| 970 | + | |
| 971 | +.summary-info-list { | |
| 972 | + display: flex; | |
| 973 | + // grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); | |
| 974 | + gap: $spacing-sm; | |
| 975 | + | |
| 976 | + // overflow-x: auto; | |
| 977 | + li { | |
| 978 | + display: flex; | |
| 979 | + flex: 1; | |
| 980 | + // min-width:24rem; | |
| 981 | + padding: $spacing-lg; | |
| 982 | + border-radius: $radius-md; | |
| 983 | + background: $color-background-default-secondary; | |
| 984 | + min-height: 16rem; | |
| 985 | + justify-content: space-between; | |
| 986 | + align-items: center; | |
| 987 | + gap: $spacing-2xlg; | |
| 988 | + | |
| 989 | + .txt-area { | |
| 990 | + display: flex; | |
| 991 | + flex-direction: column; | |
| 992 | + flex: 1; | |
| 993 | + width: 100%; | |
| 994 | + | |
| 995 | + h4 { | |
| 996 | + @include typo('tit-sm'); | |
| 997 | + color: $color-font-default-tertiary; | |
| 998 | + margin-bottom: $spacing-sm; | |
| 999 | + } | |
| 1000 | + | |
| 1001 | + p { | |
| 1002 | + @include typo('tit-lg'); | |
| 1003 | + } | |
| 1004 | + | |
| 1005 | + small { | |
| 1006 | + color: $color-font-default-tertiary; | |
| 1007 | + display: flex; | |
| 1008 | + align-items: center; | |
| 1009 | + margin-top: $spacing-3xsm; | |
| 1010 | + } | |
| 1011 | + | |
| 1012 | + .chart-area { | |
| 1013 | + margin-top: $spacing-sm; | |
| 1014 | + } | |
| 1015 | + } | |
| 1016 | + | |
| 1017 | + &.is-up { | |
| 1018 | + background: $color-background-success-primary; | |
| 1019 | + | |
| 1020 | + small { | |
| 1021 | + color: $color-font-success-primary; | |
| 1022 | + | |
| 1023 | + &::before { | |
| 1024 | + content: ""; | |
| 1025 | + display: inline-block; | |
| 1026 | + @include ico-set($color-icon-success-primary, $size-icon-sm); | |
| 1027 | + mask-image: url(pathIcon(map-get($icons,ico-caret-up))); | |
| 1028 | + } | |
| 1029 | + } | |
| 1030 | + } | |
| 1031 | + | |
| 1032 | + &.is-down { | |
| 1033 | + background: $color-background-danger-primary; | |
| 1034 | + | |
| 1035 | + small { | |
| 1036 | + color: $color-font-danger-primary; | |
| 1037 | + | |
| 1038 | + &::before { | |
| 1039 | + content: ""; | |
| 1040 | + display: inline-block; | |
| 1041 | + @include ico-set($color-icon-danger-primary, $size-icon-sm); | |
| 1042 | + mask-image: url(pathIcon(map-get($icons,ico-caret-down))); | |
| 1043 | + } | |
| 1044 | + } | |
| 1045 | + } | |
| 1046 | + | |
| 1047 | + $background-colors: ( | |
| 1048 | + primary: $color-background-brand-primary, | |
| 1049 | + secondary: $color-background-brand-secondary, | |
| 1050 | + accent: $color-background-brand-accent | |
| 1051 | + ); | |
| 1052 | + | |
| 1053 | + @each $name, $color in $background-colors { | |
| 1054 | + &.#{$name} { | |
| 1055 | + background-color: $color; | |
| 1056 | + } | |
| 1057 | + } | |
| 1058 | +} | |
| 1059 | + | |
| 1060 | +img { | |
| 1061 | + width: 8rem; | |
| 1062 | + height: 8rem; | |
| 1063 | + padding: $spacing-md; | |
| 1064 | + border-radius: $radius-md; | |
| 1065 | + background: $color-background-default-primary; | |
| 1066 | +} | |
| 1067 | +} | |
| 1068 | + | |
| 1069 | +.summary-box { | |
| 1070 | + @extend %flexArea; | |
| 1071 | + align-items: center; | |
| 1072 | + | |
| 1073 | + .l-area, | |
| 1074 | + .c-area, | |
| 1075 | + .r-area { | |
| 1076 | + >* { | |
| 1077 | + margin-bottom: 0; | |
| 1078 | + } | |
| 1079 | + } | |
| 1080 | + | |
| 1081 | + .l-area { | |
| 1082 | + flex-direction: column; | |
| 1083 | + align-items: flex-start; | |
| 1084 | + gap: $spacing-xsm; | |
| 1085 | + } | |
| 1086 | + | |
| 1087 | + border:$stroke-secondary; | |
| 1088 | + padding:$spacing-lg; | |
| 1089 | + border-radius: $radius-md; | |
| 1090 | + | |
| 1091 | + .bg-primary { | |
| 1092 | + background-color: $color-background-brand-primary; | |
| 1093 | + display: flex; | |
| 1094 | + flex-direction: column; | |
| 1095 | + justify-content: center; | |
| 1096 | + align-items: center; | |
| 1097 | + padding: $spacing-md; | |
| 1098 | + border-radius: $radius-md; | |
| 1099 | + min-height: 10rem; | |
| 1100 | + | |
| 1101 | + strong { | |
| 1102 | + @include typo('tit-xsm'); | |
| 1103 | + color: $color-font-default-secondary; | |
| 1104 | + } | |
| 1105 | + } | |
| 1106 | +} | |
| 1107 | + | |
| 1108 | +.profile-area { | |
| 1109 | + display: flex; | |
| 1110 | + flex-direction: row; | |
| 1111 | + align-items: center; | |
| 1112 | + gap: $spacing-xsm; | |
| 1113 | + img, | |
| 1114 | + .img-area { | |
| 1115 | + width: 4rem; | |
| 1116 | + height: 4rem; | |
| 1117 | + border-radius: 50%; | |
| 1118 | + overflow: hidden; | |
| 1119 | + object-fit: cover; | |
| 1120 | + } | |
| 1121 | + .img-area { | |
| 1122 | + display: inline-flex; | |
| 1123 | + justify-content: center; | |
| 1124 | + align-items: center; | |
| 1125 | + span { | |
| 1126 | + display: inline-flex; | |
| 1127 | + vertical-align: middle; | |
| 1128 | + flex: 0 0 auto; | |
| 1129 | + width: 100%; | |
| 1130 | + height: 100%; | |
| 1131 | + background-repeat: no-repeat; | |
| 1132 | + background-position: center; | |
| 1133 | + background-size: cover; | |
| 1134 | + font-size: 0; | |
| 1135 | + | |
| 1136 | + $profiles : ( | |
| 1137 | + "stu", | |
| 1138 | + "par", | |
| 1139 | + "tea", | |
| 1140 | + "org", | |
| 1141 | + "sys" | |
| 1142 | + ); | |
| 1143 | + @each $cls in $profiles { | |
| 1144 | + &.ico-profile-#{$cls} { | |
| 1145 | + background-image: url($url-img + "common/profile/profile-#{$cls}.svg") !important; | |
| 1146 | + &::before { | |
| 1147 | + background-color: transparent !important; | |
| 1148 | + } | |
| 1149 | + } | |
| 1150 | + } | |
| 1151 | + } | |
| 1152 | + } | |
| 1153 | + .txt-area { | |
| 1154 | + @include typo('tit-sm'); | |
| 1155 | + @include ellipsis(1); | |
| 1156 | + flex: 1; | |
| 1157 | + vertical-align: middle; | |
| 1158 | + > span { | |
| 1159 | + display: block; | |
| 1160 | + @include typo('body-sm'); | |
| 1161 | + } | |
| 1162 | + } | |
| 1163 | +} | |
| 1164 | +.profile-tit { | |
| 1165 | + @include typo('body-md'); | |
| 1166 | +} | |
| 1167 | +.profile { | |
| 1168 | + display: flex; | |
| 1169 | + gap: $spacing-xsm; | |
| 1170 | + align-items: center; | |
| 1171 | + .img-area { | |
| 1172 | + flex:none; | |
| 1173 | + figure { | |
| 1174 | + width: 4rem; | |
| 1175 | + height: 4rem; | |
| 1176 | + object-fit: cover; | |
| 1177 | + border-radius: $radius-full; | |
| 1178 | + border: $stroke-secondary; | |
| 1179 | + overflow: hidden; | |
| 1180 | + img { | |
| 1181 | + width: 100%; | |
| 1182 | + height: 100%; | |
| 1183 | + object-fit: cover; | |
| 1184 | + } | |
| 1185 | + } | |
| 1186 | + } | |
| 1187 | + .txt-area { | |
| 1188 | + display: flex; | |
| 1189 | + flex-direction: column; | |
| 1190 | + span { | |
| 1191 | + color: $color-font-default-tertiary; | |
| 1192 | + font-size: $size-font-xsm; | |
| 1193 | + } | |
| 1194 | + } | |
| 1195 | + &.lg, | |
| 1196 | + &.xlg { | |
| 1197 | + .txt-area { | |
| 1198 | + .profile-tit { | |
| 1199 | + font-size:$size-font-md; | |
| 1200 | + font-weight: $size-font-weight-xlg; | |
| 1201 | + } | |
| 1202 | + } | |
| 1203 | + } | |
| 1204 | + &.lg { | |
| 1205 | + gap: $spacing-sm; | |
| 1206 | + .img-area { | |
| 1207 | + figure { | |
| 1208 | + width: 5.6rem; | |
| 1209 | + height: 5.6rem; | |
| 1210 | + } | |
| 1211 | + } | |
| 1212 | + } | |
| 1213 | + &.xlg { | |
| 1214 | + flex-direction: column; | |
| 1215 | + justify-content: center; | |
| 1216 | + .img-area { | |
| 1217 | + figure { | |
| 1218 | + width: 8rem; | |
| 1219 | + height: 8rem; | |
| 1220 | + } | |
| 1221 | + } | |
| 1222 | + .txt-area { | |
| 1223 | + justify-content: center; | |
| 1224 | + text-align: center; | |
| 1225 | + } | |
| 1226 | + } | |
| 1227 | + &.sm { | |
| 1228 | + .img-area { | |
| 1229 | + figure { | |
| 1230 | + width: 2.4rem; | |
| 1231 | + height: 2.4rem; | |
| 1232 | + } | |
| 1233 | + } | |
| 1234 | + .txt-area { | |
| 1235 | + flex-direction: row; | |
| 1236 | + align-items: center; | |
| 1237 | + gap: $spacing-2xsm; | |
| 1238 | + .profile-tit { | |
| 1239 | + font-size: $size-font-xsm; | |
| 1240 | + } | |
| 1241 | + span { | |
| 1242 | + font-size: $size-font-2xsm; | |
| 1243 | + } | |
| 1244 | + } | |
| 1245 | + } | |
| 1246 | +} | |
| 1247 | + | |
| 1248 | +.step { | |
| 1249 | + margin-bottom: $spacing-2xlg; | |
| 1250 | + display: flex; | |
| 1251 | + li { | |
| 1252 | + position:relative; | |
| 1253 | + display: flex; | |
| 1254 | + flex-direction: column; | |
| 1255 | + gap:$spacing-sm; | |
| 1256 | + flex:1; | |
| 1257 | + justify-content: center; | |
| 1258 | + align-items: center; | |
| 1259 | + | |
| 1260 | + &.is-active { | |
| 1261 | + .num { | |
| 1262 | + background-color: $color-background-brand-primary-inverse; | |
| 1263 | + border-color: $color-stroke-brand-primary; | |
| 1264 | + font-size:0; | |
| 1265 | + &::before { | |
| 1266 | + content: " "; | |
| 1267 | + display: inline-block; | |
| 1268 | + @include ico-set($color-icon-default-primary-inverse, $size-icon-sm); | |
| 1269 | + mask-image: url(pathIcon(map-get($icons,ico-check))); | |
| 1270 | + } | |
| 1271 | + &::after { | |
| 1272 | + background-color: $color-background-brand-primary-inverse; | |
| 1273 | + } | |
| 1274 | + } | |
| 1275 | + } | |
| 1276 | + &.is-current { | |
| 1277 | + .num { | |
| 1278 | + border-color: $color-stroke-brand-primary; | |
| 1279 | + font-size:0; | |
| 1280 | + &::before { | |
| 1281 | + content: " "; | |
| 1282 | + display: inline-block; | |
| 1283 | + width: $size-icon-sm; | |
| 1284 | + height: $size-icon-sm; | |
| 1285 | + border-radius: 50%; | |
| 1286 | + background-color: $color-background-brand-primary-inverse; | |
| 1287 | + } | |
| 1288 | + } | |
| 1289 | + } | |
| 1290 | + &:last-of-type { | |
| 1291 | + .num { | |
| 1292 | + &::after { | |
| 1293 | + display: none; | |
| 1294 | + } | |
| 1295 | + } | |
| 1296 | + } | |
| 1297 | + } | |
| 1298 | + .num { | |
| 1299 | + display: flex; | |
| 1300 | + align-items: center; | |
| 1301 | + justify-content: center; | |
| 1302 | + width: 4rem; | |
| 1303 | + height: 4rem; | |
| 1304 | + border:.4rem solid $color-stroke-default-tertiary; | |
| 1305 | + border-radius: 50%; | |
| 1306 | + font-size: $size-font-md; | |
| 1307 | + font-weight: $size-font-weight-xlg; | |
| 1308 | + color:$color-font-default-quaternary; | |
| 1309 | + background-color: $color-background-default-primary; | |
| 1310 | + &::after { | |
| 1311 | + content: " "; | |
| 1312 | + position: absolute; | |
| 1313 | + top:calc(2rem - .2rem); | |
| 1314 | + width: 100%; | |
| 1315 | + left:50%; | |
| 1316 | + right:0; | |
| 1317 | + height: .4rem; | |
| 1318 | + z-index: -1; | |
| 1319 | + background-color: $color-background-default-tertiary; | |
| 1320 | + } | |
| 1321 | + } | |
| 1322 | + p { | |
| 1323 | + display: flex; | |
| 1324 | + flex-direction: column; | |
| 1325 | + gap: $spacing-2xsm; | |
| 1326 | + align-items: center; | |
| 1327 | + justify-content: center; | |
| 1328 | + strong { | |
| 1329 | + color:$color-font-default-tertiary; | |
| 1330 | + } | |
| 1331 | + } | |
| 1332 | +} | |
| 1333 | +.step-unit-accordion{ | |
| 1334 | + display: flex; | |
| 1335 | + gap: $spacing-2xsm; | |
| 1336 | + flex-direction: row-reverse; | |
| 1337 | + .btn-step-unit-accordion-toggle { | |
| 1338 | + display: flex; | |
| 1339 | + align-items: center; | |
| 1340 | + justify-content: center; | |
| 1341 | + width: 2.4rem; | |
| 1342 | + height: 2.4rem; | |
| 1343 | + background-color: $color-background-default-primary; | |
| 1344 | + border-radius: $radius-full; | |
| 1345 | + border: $stroke-primary; | |
| 1346 | + font-size: 0; | |
| 1347 | + transition: all .3s; | |
| 1348 | + &::after { | |
| 1349 | + content: " "; | |
| 1350 | + display: block; | |
| 1351 | + @include ico($size-icon-md, caret-up, $color-icon-default-secondary); | |
| 1352 | + } | |
| 1353 | + } | |
| 1354 | + .step-unit-accordion-cont:has(.step-unit-list:only-child) ~ .btn-step-unit-accordion-toggle{ | |
| 1355 | + display: none; | |
| 1356 | + } | |
| 1357 | + &.is-close { | |
| 1358 | + .btn-step-unit-accordion-toggle { | |
| 1359 | + transform: rotate(-180deg); | |
| 1360 | + } | |
| 1361 | + .step-unit-accordion-cont { | |
| 1362 | + .step-unit-list ~ .step-unit-list { | |
| 1363 | + display: none; | |
| 1364 | + } | |
| 1365 | + } | |
| 1366 | + } | |
| 1367 | +} | |
| 1368 | +.step-unit-area{ | |
| 1369 | + display: flex; | |
| 1370 | + gap: $spacing-3xsm; | |
| 1371 | + flex-direction: column; | |
| 1372 | + overflow: hidden; | |
| 1373 | +} | |
| 1374 | +.step-unit-list { | |
| 1375 | + display: flex; | |
| 1376 | + flex-wrap: wrap; | |
| 1377 | + width: fit-content; | |
| 1378 | + gap:$spacing-2xsm; | |
| 1379 | + border-radius: $radius-lg; | |
| 1380 | + border:$stroke-secondary; | |
| 1381 | + padding:$spacing-2xsm $spacing-xsm; | |
| 1382 | + align-items: center; | |
| 1383 | + li { | |
| 1384 | + display: inline-flex; | |
| 1385 | + align-items: center; | |
| 1386 | + gap:$spacing-2xsm; | |
| 1387 | + @include typo('body-sm'); | |
| 1388 | + color: $color-font-default-secondary; | |
| 1389 | + line-height: normal; | |
| 1390 | + &::after { | |
| 1391 | + content: " "; | |
| 1392 | + display: inline-block; | |
| 1393 | + @include ico-set($color-icon-default-secondary, 1.2rem); | |
| 1394 | + mask-image: url(pathIcon(map-get($icons,"ico-gt"))); | |
| 1395 | + } | |
| 1396 | + &:last-of-type { | |
| 1397 | + &::after { | |
| 1398 | + display: none; | |
| 1399 | + } | |
| 1400 | + } | |
| 1401 | + } | |
| 1402 | +} | |
| 1403 | +/* loading */ | |
| 1404 | +.loading { | |
| 1405 | + position: fixed; | |
| 1406 | + display: flex; | |
| 1407 | + flex-direction: column; | |
| 1408 | + align-items: center; | |
| 1409 | + justify-content: center; | |
| 1410 | + top: 0; | |
| 1411 | + right: 0; | |
| 1412 | + bottom: 0; | |
| 1413 | + left: 0; | |
| 1414 | + width: 100vw; | |
| 1415 | + height: 100%; | |
| 1416 | + background: $color-white-alpha60; | |
| 1417 | + font-size: 0; | |
| 1418 | + text-align: center; | |
| 1419 | + z-index: 101; | |
| 1420 | + backdrop-filter:blur(8px); | |
| 1421 | + gap: $spacing-2xsm; | |
| 1422 | + figure { | |
| 1423 | + margin-bottom: $spacing-md; | |
| 1424 | + } | |
| 1425 | + &:has(figure) { | |
| 1426 | + &::before { | |
| 1427 | + order:2; | |
| 1428 | + } | |
| 1429 | + } | |
| 1430 | + strong { | |
| 1431 | + font-size: 1.8rem; | |
| 1432 | + font-weight: $size-font-weight-md; | |
| 1433 | + color: $spot; | |
| 1434 | + span { | |
| 1435 | + font-size: 2.4rem; | |
| 1436 | + font-weight: $size-font-weight-xlg; | |
| 1437 | + } | |
| 1438 | + } | |
| 1439 | + p { | |
| 1440 | + display: block; | |
| 1441 | + font-size: $size-font-sm; | |
| 1442 | + line-height: 1.25; | |
| 1443 | + } | |
| 1444 | + &:has(figure) { | |
| 1445 | + &::before { | |
| 1446 | + order:2; | |
| 1447 | + } | |
| 1448 | + } | |
| 1449 | + &::before { | |
| 1450 | + content: " "; | |
| 1451 | + width: 8rem; | |
| 1452 | + height: 8rem; | |
| 1453 | + background-size: contain; | |
| 1454 | + background: url($url-img + 'common/common/loading.svg') center no-repeat; | |
| 1455 | + } | |
| 1456 | +} | |
| 1457 | +*:has(>.loading-layer ) { | |
| 1458 | + position: relative; | |
| 1459 | + overflow: hidden; | |
| 1460 | +} | |
| 1461 | +.loading-area { | |
| 1462 | + position: relative; | |
| 1463 | + z-index: 0; | |
| 1464 | +} | |
| 1465 | +.loading-layer { | |
| 1466 | + position: absolute; | |
| 1467 | + display: none; | |
| 1468 | + flex-direction: column; | |
| 1469 | + align-items: center; | |
| 1470 | + justify-content: center; | |
| 1471 | + top: 0; | |
| 1472 | + right: 0; | |
| 1473 | + bottom: 0; | |
| 1474 | + left: 0; | |
| 1475 | + width: 100%; | |
| 1476 | + height: 100%; | |
| 1477 | + gap: $spacing-3xsm; | |
| 1478 | + background: $color-white-alpha80; | |
| 1479 | + font-size: 0; | |
| 1480 | + text-align: center; | |
| 1481 | + z-index: 10; | |
| 1482 | + backdrop-filter: blur(5px); | |
| 1483 | + &.is-loading { | |
| 1484 | + display: flex; | |
| 1485 | + } | |
| 1486 | + strong { | |
| 1487 | + @include typo('label-lg', 'em'); | |
| 1488 | + } | |
| 1489 | + p { | |
| 1490 | + display: block; | |
| 1491 | + @include typo('body-md'); | |
| 1492 | + color: $color-font-default-secondary; | |
| 1493 | + } | |
| 1494 | + &::before { | |
| 1495 | + content: " "; | |
| 1496 | + width: 8rem; | |
| 1497 | + height: 8rem; | |
| 1498 | + background: url(profile + 'common/common/loading-layer.gif') center no-repeat; | |
| 1499 | + background-size: contain; | |
| 1500 | + } | |
| 1501 | + &.is-active { | |
| 1502 | + & ~ * { | |
| 1503 | + overflow: hidden; | |
| 1504 | + } | |
| 1505 | + } | |
| 1506 | +} | |
| 1507 | +/*------------------------------------------------- | |
| 1508 | + component-common | |
| 1509 | +-------------------------------------------------*/ | |
| 1510 | +.hidden { | |
| 1511 | + @include hideElement(); | |
| 1512 | +} | |
| 1513 | +.m-block { | |
| 1514 | + display: none; | |
| 1515 | +} | |
| 1516 | +.m-none { | |
| 1517 | + display: block; | |
| 1518 | +} | |
| 1519 | +.block { | |
| 1520 | + display: block; | |
| 1521 | +} | |
| 1522 | +.inlin-block { | |
| 1523 | + display: inline-block; | |
| 1524 | +} | |
| 1525 | +.lnk-full, | |
| 1526 | +.link-full { | |
| 1527 | + position: absolute; | |
| 1528 | + top: 0; | |
| 1529 | + left: 0; | |
| 1530 | + right: 0; | |
| 1531 | + bottom: 0; | |
| 1532 | + text-indent: -99999px; | |
| 1533 | + background-color: $color-transparent; | |
| 1534 | + display: block; | |
| 1535 | + z-index: 1; | |
| 1536 | +} | |
| 1537 | +a.hover-link-style, | |
| 1538 | +.hover-link-style { | |
| 1539 | + &:hover { | |
| 1540 | + text-decoration: underline; | |
| 1541 | + } | |
| 1542 | +} | |
| 1543 | +.order-front { | |
| 1544 | + position: relative; | |
| 1545 | + z-index: 3; | |
| 1546 | +} | |
| 1547 | +.ellipsis { | |
| 1548 | + @include ellipsis(2); | |
| 1549 | +} | |
| 1550 | +.txt-hide { | |
| 1551 | + @include hideElement(); | |
| 1552 | + @at-root button & { | |
| 1553 | + display: inline-block; | |
| 1554 | + text-indent: -99999px; | |
| 1555 | + } | |
| 1556 | +} | |
| 1557 | +.time { | |
| 1558 | + @include typo('label-sm'); | |
| 1559 | + color: $color-font-default-tertiary; | |
| 1560 | +} | |
| 1561 | +.section { | |
| 1562 | + margin-bottom: $spacing-section-md; | |
| 1563 | + &.sm { | |
| 1564 | + margin-bottom: $spacing-section-sm; | |
| 1565 | + } | |
| 1566 | + & > *:first-child { | |
| 1567 | + margin-top:0; | |
| 1568 | + } | |
| 1569 | + &:last-child { | |
| 1570 | + margin-bottom:0; | |
| 1571 | + } | |
| 1572 | + + .section.margin-top-xsm { | |
| 1573 | + margin-top: calc($spacing-section-sm * -1); | |
| 1574 | + } | |
| 1575 | +} | |
| 1576 | +.section-accordion { | |
| 1577 | + &.is-close { | |
| 1578 | + background-color: $color-background-disabled-primary; | |
| 1579 | + padding: $spacing-lg; | |
| 1580 | + border-radius: $radius-md; | |
| 1581 | + margin-bottom: 1.6rem; | |
| 1582 | + .section-accordion-tit-area { | |
| 1583 | + margin-bottom: 0; | |
| 1584 | + align-items: center; | |
| 1585 | + } | |
| 1586 | + .section-accordion-cont { | |
| 1587 | + display: none; | |
| 1588 | + } | |
| 1589 | + .btn-section-accordion-toggle.btn { | |
| 1590 | + &::before { | |
| 1591 | + transform: rotate(-180deg); | |
| 1592 | + } | |
| 1593 | + } | |
| 1594 | + } | |
| 1595 | +} | |
| 1596 | +/*------------------------------------------------- | |
| 1597 | + component-etc | |
| 1598 | +-------------------------------------------------*/ | |
| 1599 | +.bullet, | |
| 1600 | +.bullet-tit, | |
| 1601 | +.bullet-dash, | |
| 1602 | +.bullet-none, | |
| 1603 | +.bullet-hangul { | |
| 1604 | + margin-bottom: $spacing-md; | |
| 1605 | + &:last-child { | |
| 1606 | + margin-bottom: 0; | |
| 1607 | + } | |
| 1608 | + &>li { | |
| 1609 | + position: relative; | |
| 1610 | + padding-left: $spacing-md; | |
| 1611 | + &~li { | |
| 1612 | + margin-top: $spacing-2xsm; | |
| 1613 | + } | |
| 1614 | + &:before { | |
| 1615 | + content: ""; | |
| 1616 | + position: absolute; | |
| 1617 | + top: .8rem; | |
| 1618 | + left: 0; | |
| 1619 | + } | |
| 1620 | + } | |
| 1621 | +} | |
| 1622 | +.bullet-none { | |
| 1623 | + >li { | |
| 1624 | + padding-left: 0; | |
| 1625 | + } | |
| 1626 | +} | |
| 1627 | +.bullet>li:before, | |
| 1628 | +.bullet-tit>li:before { | |
| 1629 | + width: 0.4rem; | |
| 1630 | + height: 0.4rem; | |
| 1631 | + border-radius: 50%; | |
| 1632 | + background-color: $color-font-default-primary; | |
| 1633 | +} | |
| 1634 | +.bullet-dash>li:before { | |
| 1635 | + top: .8rem; | |
| 1636 | + width: 0.6rem; | |
| 1637 | + height: 0.1rem; | |
| 1638 | + background-color: $color-font-default-secondary; | |
| 1639 | +} | |
| 1640 | +.bullet-tit>li { | |
| 1641 | + padding-left: 12rem; | |
| 1642 | + cite, | |
| 1643 | + .tit { | |
| 1644 | + position: absolute; | |
| 1645 | + left: 2rem; | |
| 1646 | + font-weight: $size-font-weight-xlg; | |
| 1647 | + } | |
| 1648 | +} | |
| 1649 | +.bullet-hangul { | |
| 1650 | + li { | |
| 1651 | + padding-left: 2rem; | |
| 1652 | + &::before { | |
| 1653 | + top: 0.1rem; | |
| 1654 | + } | |
| 1655 | + &:nth-child(1)::before { | |
| 1656 | + content: "㉠"; | |
| 1657 | + } | |
| 1658 | + &:nth-child(2)::before { | |
| 1659 | + content: "㉡"; | |
| 1660 | + } | |
| 1661 | + &:nth-child(3)::before { | |
| 1662 | + content: "㉢"; | |
| 1663 | + } | |
| 1664 | + &:nth-child(4)::before { | |
| 1665 | + content: "㉣"; | |
| 1666 | + } | |
| 1667 | + &:nth-child(5)::before { | |
| 1668 | + content: "㉤"; | |
| 1669 | + } | |
| 1670 | + &:nth-child(6)::before { | |
| 1671 | + content: "㉥"; | |
| 1672 | + } | |
| 1673 | + &:nth-child(7)::before { | |
| 1674 | + content: "㉦"; | |
| 1675 | + } | |
| 1676 | + &:nth-child(8)::before { | |
| 1677 | + content: "㉧"; | |
| 1678 | + } | |
| 1679 | + &:nth-child(9)::before { | |
| 1680 | + content: "㉨"; | |
| 1681 | + } | |
| 1682 | + &:nth-child(10)::before { | |
| 1683 | + content: "㉩"; | |
| 1684 | + } | |
| 1685 | + &:nth-child(11)::before { | |
| 1686 | + content: "㉪"; | |
| 1687 | + } | |
| 1688 | + &:nth-child(12)::before { | |
| 1689 | + content: "㉫"; | |
| 1690 | + } | |
| 1691 | + :nth-child(13)::before { | |
| 1692 | + content: "㉬"; | |
| 1693 | + } | |
| 1694 | + :nth-child(14)::before { | |
| 1695 | + content: "㉭"; | |
| 1696 | + } | |
| 1697 | + } | |
| 1698 | +} | |
| 1699 | +.msg-input-area { | |
| 1700 | + input ~ .msg-box { | |
| 1701 | + // margin-top: 1.2rem; | |
| 1702 | + // top: 6rem; | |
| 1703 | + } | |
| 1704 | + input.is-error:focus { | |
| 1705 | + & ~ .msg-box { | |
| 1706 | + display: flex; | |
| 1707 | + } | |
| 1708 | + } | |
| 1709 | +} | |
| 1710 | +.msg-box { | |
| 1711 | + display: flex; | |
| 1712 | + position: absolute; | |
| 1713 | + // top: 50%; | |
| 1714 | + background-color: $color-background-warning-primary; | |
| 1715 | + // max-width: 32rem; | |
| 1716 | + white-space: nowrap; | |
| 1717 | + z-index: 100; | |
| 1718 | + p { | |
| 1719 | + padding: $spacing-md; | |
| 1720 | + width: 24rem; | |
| 1721 | + white-space: normal; | |
| 1722 | + word-break: normal; | |
| 1723 | + text-align: left; | |
| 1724 | + box-sizing: border-box; | |
| 1725 | + } | |
| 1726 | + // width: 100%; | |
| 1727 | + | |
| 1728 | + box-sizing: border-box; | |
| 1729 | + z-index: 1; | |
| 1730 | + border:$stroke-secondary; | |
| 1731 | + border-radius:$radius-md; | |
| 1732 | + box-shadow: $shadow-md; | |
| 1733 | + font-size: $size-font-xsm; | |
| 1734 | + | |
| 1735 | + &.p-r { | |
| 1736 | + right: 0; | |
| 1737 | + } | |
| 1738 | +} | |
| 1739 | + | |
| 1740 | +/* toast */ | |
| 1741 | +@keyframes toast-up { | |
| 1742 | + 0% { | |
| 1743 | + opacity: 0; | |
| 1744 | + transform: translateX(-50%) translateY(-60%); | |
| 1745 | + } | |
| 1746 | + 100% { | |
| 1747 | + opacity: 1; | |
| 1748 | + transform: translateX(-50%) translateY(0); | |
| 1749 | + } | |
| 1750 | + } | |
| 1751 | + | |
| 1752 | + @keyframes toast-down { | |
| 1753 | + 0% { | |
| 1754 | + opacity: 1; | |
| 1755 | + transform: translateX(-50%) translateY(0); | |
| 1756 | + } | |
| 1757 | + 100% { | |
| 1758 | + opacity: 0; | |
| 1759 | + transform: translateX(-50%) translateY(-60%); | |
| 1760 | + } | |
| 1761 | +} | |
| 1762 | +.toast { | |
| 1763 | + position: fixed; | |
| 1764 | + top: 50%; | |
| 1765 | + left: 50%; | |
| 1766 | + transform: translateX(-50%) translateY(-50%); | |
| 1767 | + max-width: 32rem; | |
| 1768 | + margin-right: 2rem; | |
| 1769 | + margin-left: 2rem; | |
| 1770 | + padding: $spacing-md; | |
| 1771 | + line-height: 1.2; | |
| 1772 | + background-color:$color-black-alpha70; | |
| 1773 | + color: $color-font-default-primary-inverse; | |
| 1774 | + border-radius: $radius-sm; | |
| 1775 | + z-index: 100; | |
| 1776 | + opacity: 0; | |
| 1777 | + animation-duration: 0.3s; | |
| 1778 | + animation-fill-mode: forwards; | |
| 1779 | + z-index:-1; | |
| 1780 | + &.is-show { | |
| 1781 | + display: block; | |
| 1782 | + animation-name: toast-up; | |
| 1783 | + z-index: 9999; | |
| 1784 | + } | |
| 1785 | + &.is-hide { | |
| 1786 | + animation-name: toast-down; | |
| 1787 | + } | |
| 1788 | + &.is-hidden { | |
| 1789 | + display: none; | |
| 1790 | + } | |
| 1791 | +} | |
| 1792 | + | |
| 1793 | +.class-thumb { | |
| 1794 | + aspect-ratio: 4/3 !important; | |
| 1795 | +} | |
| 1796 | + | |
| 1797 | +.img-box { | |
| 1798 | + border: $stroke-secondary; | |
| 1799 | + border-radius: $radius-md; | |
| 1800 | + overflow: hidden; | |
| 1801 | + img { | |
| 1802 | + width: 100%; | |
| 1803 | + display: block; | |
| 1804 | + margin:0 auto; | |
| 1805 | + } | |
| 1806 | + &:has(.max-w) { | |
| 1807 | + padding:$spacing-lg; | |
| 1808 | + } | |
| 1809 | + @each $name, $color in ( | |
| 1810 | + "primary": $color-background-brand-primary, | |
| 1811 | + "secondary": $color-background-brand-secondary, | |
| 1812 | + "accent": $color-background-brand-accent | |
| 1813 | + ) { | |
| 1814 | + &.#{$name} { | |
| 1815 | + background: $color; | |
| 1816 | + border: none; | |
| 1817 | + } | |
| 1818 | + } | |
| 1819 | + &.class-thumb { | |
| 1820 | + img { | |
| 1821 | + object-fit: cover; | |
| 1822 | + height: 100%; | |
| 1823 | + width: 100%; | |
| 1824 | + } | |
| 1825 | + } | |
| 1826 | +} | |
| 1827 | +%none-txt { | |
| 1828 | + position: absolute; | |
| 1829 | + display: flex; | |
| 1830 | + flex-direction: column; | |
| 1831 | + top: 50%; | |
| 1832 | + left: 50%; | |
| 1833 | + width: calc(100% - 2.3rem); | |
| 1834 | + transform: translate(-50%, -50%); | |
| 1835 | + gap: 0.4rem; | |
| 1836 | + align-items: center; | |
| 1837 | + text-align: center; | |
| 1838 | + figure { | |
| 1839 | + margin-bottom: 1.6rem; | |
| 1840 | + } | |
| 1841 | + em { | |
| 1842 | + font-size: 1.6rem; | |
| 1843 | + font-weight: 400; | |
| 1844 | + } | |
| 1845 | + p { | |
| 1846 | + font-size: 1.2rem; | |
| 1847 | + color: $color-font-default-tertiary; | |
| 1848 | + } | |
| 1849 | +} | |
| 1850 | + | |
| 1851 | +.none-txt { | |
| 1852 | + @extend %none-txt; | |
| 1853 | +} | |
| 1854 | + | |
| 1855 | +/* box */ | |
| 1856 | +.bg-box, | |
| 1857 | +.bg-border-box, | |
| 1858 | +.border-box { | |
| 1859 | + margin-bottom: $spacing-section-sm; | |
| 1860 | + padding: 2.4rem; | |
| 1861 | + box-sizing: border-box; | |
| 1862 | + .btn-cont { | |
| 1863 | + margin-top: $spacing-2xsm; | |
| 1864 | + } | |
| 1865 | + >*:first-child { | |
| 1866 | + margin-top: 0; | |
| 1867 | + } | |
| 1868 | + >*:last-child { | |
| 1869 | + margin-bottom: 0; | |
| 1870 | + } | |
| 1871 | + .bg-box+.form-cont { | |
| 1872 | + margin-top: $spacing-section-sm; | |
| 1873 | + } | |
| 1874 | + &.p-sm { | |
| 1875 | + padding: $spacing-md; | |
| 1876 | + } | |
| 1877 | + &.p-lg { | |
| 1878 | + padding: $spacing-2xlg; | |
| 1879 | + } | |
| 1880 | + &:last-child { | |
| 1881 | + margin-bottom:0; | |
| 1882 | + } | |
| 1883 | + &.section { | |
| 1884 | + @extend .section; | |
| 1885 | + } | |
| 1886 | + & + .list-type, | |
| 1887 | + & + .write-type, | |
| 1888 | + & + .info-type { | |
| 1889 | + margin-top: -$spacing-md; | |
| 1890 | + } | |
| 1891 | + &.sm { | |
| 1892 | + padding: $spacing-md; | |
| 1893 | + border-radius: $radius-sm; | |
| 1894 | + } | |
| 1895 | + &.lg { | |
| 1896 | + padding: 4rem; | |
| 1897 | + } | |
| 1898 | +} | |
| 1899 | + | |
| 1900 | +.bg-box { | |
| 1901 | + background-color: $color-background-default-secondary; | |
| 1902 | + border-radius: $radius-md; | |
| 1903 | +} | |
| 1904 | + | |
| 1905 | +.bg-border-box { | |
| 1906 | + display: flex; | |
| 1907 | + flex-direction: column; | |
| 1908 | + background-color: $color-background-default-secondary; | |
| 1909 | + border: $stroke-secondary; | |
| 1910 | + border-radius: $radius-sm; | |
| 1911 | + overflow: hidden; | |
| 1912 | + padding: 0; | |
| 1913 | + &.wh { | |
| 1914 | + background-color: $color-background-default-primary; | |
| 1915 | + } | |
| 1916 | + &:last-child { | |
| 1917 | + margin-bottom: 0; | |
| 1918 | + } | |
| 1919 | + .box-header { | |
| 1920 | + background-color: $color-background-default-secondary; | |
| 1921 | + border-bottom: $stroke-secondary; | |
| 1922 | + padding: $spacing-md; | |
| 1923 | + > *:last-child { | |
| 1924 | + margin-bottom: 0; | |
| 1925 | + } | |
| 1926 | + } | |
| 1927 | + .box-body { | |
| 1928 | + padding: $spacing-md; | |
| 1929 | + position: relative; | |
| 1930 | + flex: 1; | |
| 1931 | + overflow-y: auto; | |
| 1932 | + overflow-x: hidden; | |
| 1933 | + } | |
| 1934 | + .box-footer { | |
| 1935 | + display: flex; | |
| 1936 | + width: 100%; | |
| 1937 | + box-sizing: border-box; | |
| 1938 | + align-items: center; | |
| 1939 | + justify-content: center; | |
| 1940 | + padding: $spacing-md; | |
| 1941 | + background-color: $color-background-default-primary; | |
| 1942 | + border-top: $stroke-secondary; | |
| 1943 | + .l-area, | |
| 1944 | + .r-area { | |
| 1945 | + display: flex; | |
| 1946 | + align-items: center; | |
| 1947 | + justify-content: flex-start; | |
| 1948 | + flex: 1; | |
| 1949 | + gap: $spacing-2xsm; | |
| 1950 | + } | |
| 1951 | + .r-area { | |
| 1952 | + justify-content: flex-end; | |
| 1953 | + } | |
| 1954 | + } | |
| 1955 | +} | |
| 1956 | + | |
| 1957 | +.border-box { | |
| 1958 | + border: $stroke-secondary; | |
| 1959 | + border-radius: $radius-md; | |
| 1960 | + &.bg { | |
| 1961 | + background-color: $color-background-default-secondary; | |
| 1962 | + } | |
| 1963 | +} | |
| 1964 | + | |
| 1965 | +.box-tit-area { | |
| 1966 | + margin-bottom: $spacing-lg; | |
| 1967 | + &:last-child { | |
| 1968 | + margin-bottom: 0; | |
| 1969 | + } | |
| 1970 | +} | |
| 1971 | + | |
| 1972 | +.box-tit-img { | |
| 1973 | + margin-bottom: $spacing-md; | |
| 1974 | + img { | |
| 1975 | + display: block; | |
| 1976 | + max-width: 100%; | |
| 1977 | + margin: 0 auto; | |
| 1978 | + } | |
| 1979 | +} | |
| 1980 | + | |
| 1981 | +.box-tit { | |
| 1982 | + display: block; | |
| 1983 | + @include typo('tit-md'); | |
| 1984 | + margin-bottom: $spacing-2xsm; | |
| 1985 | +} | |
| 1986 | + | |
| 1987 | +.box-tit-lg { | |
| 1988 | + display: block; | |
| 1989 | + @include typo('tit-lg'); | |
| 1990 | + margin-bottom: $spacing-xsm; | |
| 1991 | +} | |
| 1992 | + | |
| 1993 | +.box-tit-sm { | |
| 1994 | + display: block; | |
| 1995 | + @include typo('tit-sm'); | |
| 1996 | + margin-bottom: $spacing-xsm; | |
| 1997 | +} | |
| 1998 | +.box-tit-xsm { | |
| 1999 | + display: block; | |
| 2000 | + @include typo('tit-xsm'); | |
| 2001 | + margin-bottom: $spacing-xsm; | |
| 2002 | +} | |
| 2003 | +.box-txt { | |
| 2004 | + @include typo('tit-lg'); | |
| 2005 | + margin-bottom: $spacing-2xsm; | |
| 2006 | + em.fs-lg { | |
| 2007 | + font-size: 3.2rem; | |
| 2008 | + } | |
| 2009 | +} | |
| 2010 | + | |
| 2011 | +hr { | |
| 2012 | + &.solid { | |
| 2013 | + display: block; | |
| 2014 | + width: 100%; | |
| 2015 | + border: 0; | |
| 2016 | + border-top: $stroke-secondary; | |
| 2017 | + margin: $spacing-2xsm 0; | |
| 2018 | + } | |
| 2019 | + &.dashed { | |
| 2020 | + border: 0; | |
| 2021 | + border-top: $stroke-secondary; | |
| 2022 | + border-top-style: dashed; | |
| 2023 | + margin: $spacing-2xsm 0; | |
| 2024 | + } | |
| 2025 | +} | |
| 2026 | + | |
| 2027 | +.bg-area { | |
| 2028 | + position:relative; | |
| 2029 | + border-radius: $radius-md; | |
| 2030 | + background: $color-background-default-tertiary; | |
| 2031 | + padding:$spacing-lg; | |
| 2032 | + .box { | |
| 2033 | + padding:$spacing-lg; | |
| 2034 | + border-radius: $radius-md; | |
| 2035 | + border: $stroke-primary; | |
| 2036 | + background: $color-background-default-primary; | |
| 2037 | + margin-bottom: $spacing-md; | |
| 2038 | + &:last-child { | |
| 2039 | + margin-bottom: 0; | |
| 2040 | + } | |
| 2041 | + } | |
| 2042 | +} | |
| 2043 | + | |
| 2044 | +.border-box-list { | |
| 2045 | + display: flex; | |
| 2046 | + flex-direction: column; | |
| 2047 | + gap: $spacing-xsm; | |
| 2048 | + > li { | |
| 2049 | + @extend .border-box; | |
| 2050 | + position: relative; | |
| 2051 | + display: flex; | |
| 2052 | + justify-content: space-between; | |
| 2053 | + flex-wrap: wrap; | |
| 2054 | + gap: $spacing-2xsm $spacing-md; | |
| 2055 | + align-items: center; | |
| 2056 | + margin-bottom: 0; | |
| 2057 | + background-color: $color-background-default-primary; | |
| 2058 | + &.is-active { | |
| 2059 | + border-color: $color-font-brand-primary; | |
| 2060 | + } | |
| 2061 | + } | |
| 2062 | + .txt-area { | |
| 2063 | + flex: 1; | |
| 2064 | + .label-area { | |
| 2065 | + margin-bottom: $spacing-xsm; | |
| 2066 | + } | |
| 2067 | + > *:last-child { | |
| 2068 | + margin-bottom: 0; | |
| 2069 | + } | |
| 2070 | + } | |
| 2071 | + .img-area { | |
| 2072 | + width: 4rem; | |
| 2073 | + flex:none; | |
| 2074 | + } | |
| 2075 | + .box-fnc { | |
| 2076 | + display: flex; | |
| 2077 | + gap: $spacing-2xsm $spacing-md; | |
| 2078 | + align-items: center; | |
| 2079 | + } | |
| 2080 | + p { | |
| 2081 | + a:hover { | |
| 2082 | + text-decoration: underline; | |
| 2083 | + } | |
| 2084 | + } | |
| 2085 | + .ico-sm-close { | |
| 2086 | + position: absolute; | |
| 2087 | + top: -0.6rem; | |
| 2088 | + right: -0.6rem; | |
| 2089 | + } | |
| 2090 | + .ico-move { | |
| 2091 | + margin: 0 -1.2rem; | |
| 2092 | + } | |
| 2093 | + li:has(.lnk-full), | |
| 2094 | + li:has(.file-custom-full) { | |
| 2095 | + &:hover { | |
| 2096 | + border-width: $size-stroke-sm; | |
| 2097 | + border-color: $color-stroke-brand-primary; | |
| 2098 | + } | |
| 2099 | + } | |
| 2100 | +} | |
| 2101 | + | |
| 2102 | +.border-box-info-list { | |
| 2103 | + display: grid; | |
| 2104 | + grid-template-columns: repeat(5, 1fr); | |
| 2105 | + gap: $spacing-2xsm; | |
| 2106 | + li { | |
| 2107 | + display:flex; | |
| 2108 | + border: $stroke-secondary; | |
| 2109 | + padding:$spacing-md; | |
| 2110 | + border-radius: $radius-sm; | |
| 2111 | + min-height:48px; | |
| 2112 | + justify-content: space-between; | |
| 2113 | + align-items: center; | |
| 2114 | + gap:$spacing-xsm; | |
| 2115 | + &.is-disabled { | |
| 2116 | + background-color: $color-background-default-secondary; | |
| 2117 | + .l-area, | |
| 2118 | + .r-area { | |
| 2119 | + opacity: .5; | |
| 2120 | + } | |
| 2121 | + } | |
| 2122 | + } | |
| 2123 | +} | |
| 2124 | + | |
| 2125 | +.total-count { | |
| 2126 | + margin-bottom: $spacing-xsm; | |
| 2127 | + em { | |
| 2128 | + color: $color-pink50; | |
| 2129 | + } | |
| 2130 | +} | |
| 2131 | +.search-block-area { | |
| 2132 | + margin-bottom: $spacing-lg; | |
| 2133 | + display: grid; | |
| 2134 | + gap:$spacing-xsm; | |
| 2135 | + padding: $spacing-md; | |
| 2136 | + border: 0.4rem solid $color-stroke-default-tertiary; | |
| 2137 | + border-radius: $radius-md; | |
| 2138 | + background-color: $color-background-default-secondary; | |
| 2139 | + .search { | |
| 2140 | + display: grid; | |
| 2141 | + gap: $spacing-2xsm; | |
| 2142 | + input { | |
| 2143 | + width: 100%; | |
| 2144 | + } | |
| 2145 | + } | |
| 2146 | + .btn-flex-cont { | |
| 2147 | + margin:0; | |
| 2148 | + } | |
| 2149 | +} | |
| 2150 | + | |
| 2151 | +.search-box { | |
| 2152 | + position: relative; | |
| 2153 | + margin-bottom: $spacing-3xlg; | |
| 2154 | + .search-box-write { | |
| 2155 | + border: $stroke-secondary; | |
| 2156 | + border-radius: $radius-md $radius-md 0 $radius-md; | |
| 2157 | + // background: url($url-img + 'common/common/bg-schbox.svg') right top no-repeat $color-background-default-secondary; | |
| 2158 | + background-color: $color-background-default-secondary; | |
| 2159 | + padding: $spacing-lg 0; | |
| 2160 | + } | |
| 2161 | + .write-type2 { | |
| 2162 | + padding:0 $spacing-lg; | |
| 2163 | + &:first-of-type { | |
| 2164 | + border-top:none; | |
| 2165 | + padding-bottom: 1.2rem; | |
| 2166 | + margin-bottom: 1.2rem; | |
| 2167 | + border-bottom:$stroke-secondary; | |
| 2168 | + } | |
| 2169 | + &:only-of-type { | |
| 2170 | + border-bottom-width: 0; | |
| 2171 | + padding-bottom: 0; | |
| 2172 | + margin-bottom: 0; | |
| 2173 | + } | |
| 2174 | + table { | |
| 2175 | + padding:5rem; | |
| 2176 | + } | |
| 2177 | + } | |
| 2178 | + .search-btn-cont { | |
| 2179 | + display: flex; | |
| 2180 | + flex-wrap: wrap; | |
| 2181 | + justify-content: flex-end; | |
| 2182 | + align-items: center; | |
| 2183 | + gap:$spacing-lg; | |
| 2184 | + &:last-child { | |
| 2185 | + margin-bottom: 0; | |
| 2186 | + } | |
| 2187 | + } | |
| 2188 | + .btn-search-box { | |
| 2189 | + display: inline-flex; | |
| 2190 | + height: 5.6rem; | |
| 2191 | + align-items: center; | |
| 2192 | + justify-content: center; | |
| 2193 | + min-width: 16rem; | |
| 2194 | + padding-left: $spacing-lg; | |
| 2195 | + padding-right: $spacing-lg; | |
| 2196 | + @include typo ('label-lg','em'); | |
| 2197 | + color:$color-font-default-primary-inverse; | |
| 2198 | + // background: linear-gradient(-90deg, $color-background-brand-secondary-inverse 0%, $color-background-brand-primary-inverse 100%); | |
| 2199 | + background-color: $color-background-brand-primary-inverse; | |
| 2200 | + border-radius: 0 0 $radius-sm $radius-sm; | |
| 2201 | + transition: all .4s; | |
| 2202 | + &::before { | |
| 2203 | + content: ""; | |
| 2204 | + display: inline-block; | |
| 2205 | + width: 2.4rem; | |
| 2206 | + height: 2.4rem; | |
| 2207 | + margin-right: $spacing-2xsm; | |
| 2208 | + background-image: url(pathIcon(map-get($icons,"ico-search"), $color-white)); | |
| 2209 | + } | |
| 2210 | + &:hover { | |
| 2211 | + box-shadow: $shadow-md; | |
| 2212 | + background-color: $color-background-brand-primary-inverse-hover; | |
| 2213 | + } | |
| 2214 | + | |
| 2215 | + } | |
| 2216 | + .btn-search-toggle { | |
| 2217 | + position: absolute; | |
| 2218 | + left:4rem; | |
| 2219 | + bottom:0; | |
| 2220 | + height: 3.6rem; | |
| 2221 | + margin:1.6rem 0; | |
| 2222 | + width: auto; | |
| 2223 | + i { | |
| 2224 | + @include ico($size-icon-sm, form-up); | |
| 2225 | + } | |
| 2226 | + &:hover { | |
| 2227 | + background-color: transparent; | |
| 2228 | + } | |
| 2229 | + } | |
| 2230 | +} | |
| 2231 | +@media (max-width: 1710px) { | |
| 2232 | + .search-box { | |
| 2233 | + &.is-sticky { | |
| 2234 | + width: auto; | |
| 2235 | + max-width: calc($size-wrap - $size-wrap-spacing*2); | |
| 2236 | + right:$size-wrap-spacing; | |
| 2237 | + left:calc(var(--gnb-depth1-width) + var(--gnb-depth2-width) + $size-wrap-spacing); | |
| 2238 | + } | |
| 2239 | + } | |
| 2240 | +} | |
| 2241 | +@media (max-width: 1334px) { | |
| 2242 | + .search-box { | |
| 2243 | + &.is-sticky { | |
| 2244 | + left:$size-wrap-spacing; | |
| 2245 | + } | |
| 2246 | + } | |
| 2247 | +} | |
| 2248 | + | |
| 2249 | +.bg-list { | |
| 2250 | + li { | |
| 2251 | + background-color: $color-background-default-secondary; | |
| 2252 | + min-height: 4rem; | |
| 2253 | + padding: .8rem 1.6rem; | |
| 2254 | + border-radius: $radius-xsm; | |
| 2255 | + display: flex; | |
| 2256 | + align-items: center; | |
| 2257 | + gap: $spacing-md; | |
| 2258 | + &~ li { | |
| 2259 | + margin-top: .4rem; | |
| 2260 | + } | |
| 2261 | + .num { | |
| 2262 | + font-weight: 700; | |
| 2263 | + color: $color-font-default-tertiary; | |
| 2264 | + } | |
| 2265 | + } | |
| 2266 | +} | |
| 2267 | + | |
| 2268 | +.chasi-info { | |
| 2269 | + margin-top: 0.8rem !important; | |
| 2270 | +} | |
| 2271 | +.chasi-list { | |
| 2272 | + display: flex; | |
| 2273 | + flex-direction: column; | |
| 2274 | + gap: $spacing-2xsm; | |
| 2275 | + height: 24rem; | |
| 2276 | + overflow-y: auto; | |
| 2277 | + background-color: $color-background-default-primary; | |
| 2278 | + background: url($url-img + 'custom/sub//bg_chasi.svg') $color-background-default-primary; | |
| 2279 | + border:$stroke-secondary; | |
| 2280 | + border-radius: $radius-sm; | |
| 2281 | + padding: $spacing-xsm; | |
| 2282 | + &:has(li) { | |
| 2283 | + background: $color-background-default-primary; | |
| 2284 | + } | |
| 2285 | + .chasi-tit-area { | |
| 2286 | + position: relative; | |
| 2287 | + background-color: $color-background-default-secondary; | |
| 2288 | + border-radius: $radius-xsm; | |
| 2289 | + display: flex; | |
| 2290 | + justify-content: space-between; | |
| 2291 | + align-items: center; | |
| 2292 | + gap:$spacing-md; | |
| 2293 | + padding:.8rem 2.4rem .8rem 3.6rem; | |
| 2294 | + min-height: 4rem; | |
| 2295 | + .chasi-tit-lg { | |
| 2296 | + line-height: 1.2; | |
| 2297 | + } | |
| 2298 | + } | |
| 2299 | + .btn-chasi-toggle { | |
| 2300 | + position: absolute; | |
| 2301 | + font-size:0; | |
| 2302 | + left:0; | |
| 2303 | + right:0; | |
| 2304 | + top:0; | |
| 2305 | + bottom:0; | |
| 2306 | + width: 100%; | |
| 2307 | + height: 100%; | |
| 2308 | + z-index: 1; | |
| 2309 | + &::before, | |
| 2310 | + &::after { | |
| 2311 | + content: " "; | |
| 2312 | + position: absolute; | |
| 2313 | + left:1.8rem; | |
| 2314 | + width: 1.2rem; | |
| 2315 | + height: 0.1rem; | |
| 2316 | + background-color: $color-font-default-tertiary; | |
| 2317 | + transition: transform .3s; | |
| 2318 | + } | |
| 2319 | + &:after { | |
| 2320 | + transform: rotate(90deg); | |
| 2321 | + } | |
| 2322 | + } | |
| 2323 | + .chasi-tit { | |
| 2324 | + &-lg, | |
| 2325 | + &-md, | |
| 2326 | + &-sm { | |
| 2327 | + position: relative; | |
| 2328 | + display: block; | |
| 2329 | + } | |
| 2330 | + &-md { | |
| 2331 | + color: $color-font-brand-primary; | |
| 2332 | + // padding-left: 0.8rem; | |
| 2333 | + font-weight: $size-font-weight-xlg; | |
| 2334 | + &::before { | |
| 2335 | + content: " "; | |
| 2336 | + position: absolute; | |
| 2337 | + width: 0.4rem; | |
| 2338 | + height: 0.4rem; | |
| 2339 | + top:0.6rem; | |
| 2340 | + left:-0.8rem; | |
| 2341 | + border-radius: 50%; | |
| 2342 | + background-color: $color-background-brand-primary-inverse; | |
| 2343 | + } | |
| 2344 | + } | |
| 2345 | + &-sm { | |
| 2346 | + font-size: 1.3rem; | |
| 2347 | + color:$color-black; | |
| 2348 | + font-weight: $size-font-weight-xlg; | |
| 2349 | + } | |
| 2350 | + } | |
| 2351 | + .chasi-fnc { | |
| 2352 | + position:relative; | |
| 2353 | + z-index: 3; | |
| 2354 | + } | |
| 2355 | + .chasi-cont { | |
| 2356 | + // display: grid; | |
| 2357 | + display: none; | |
| 2358 | + position: relative; | |
| 2359 | + padding: $spacing-sm 4rem; | |
| 2360 | + gap:$spacing-xsm; | |
| 2361 | + &:before { | |
| 2362 | + content: " "; | |
| 2363 | + position: absolute; | |
| 2364 | + top:0; | |
| 2365 | + left:2.4rem; | |
| 2366 | + width: 0; | |
| 2367 | + height: 0; | |
| 2368 | + border-width: 0.8rem 0.8rem 0 0.8rem; | |
| 2369 | + border-color: $color-blue10 transparent transparent transparent; | |
| 2370 | + border-style: solid; | |
| 2371 | + } | |
| 2372 | + } | |
| 2373 | + .chasi-checkradio-area { | |
| 2374 | + display: grid; | |
| 2375 | + gap: $spacing-2xsm; | |
| 2376 | + font-size: 1.3rem; | |
| 2377 | + label { | |
| 2378 | + position: relative; | |
| 2379 | + display: block; | |
| 2380 | + cursor: pointer; | |
| 2381 | + input:checked ~ span { | |
| 2382 | + color: $color-font-success-primary; | |
| 2383 | + font-weight: $size-font-weight-xlg; | |
| 2384 | + &::before { | |
| 2385 | + content: " "; | |
| 2386 | + position: absolute; | |
| 2387 | + @include ico($size-icon-md, check, $color-icon-success-primary); | |
| 2388 | + margin-left:-2rem; | |
| 2389 | + } | |
| 2390 | + } | |
| 2391 | + } | |
| 2392 | + } | |
| 2393 | + li.is-active { | |
| 2394 | + .chasi-tit-area { | |
| 2395 | + position: relative; | |
| 2396 | + background-color: $color-background-info-primary; | |
| 2397 | + .chasi-tit-lg { | |
| 2398 | + color:$color-primary70; | |
| 2399 | + font-weight: $size-font-weight-xlg; | |
| 2400 | + } | |
| 2401 | + } | |
| 2402 | + .btn-chasi-toggle { | |
| 2403 | + &::before, | |
| 2404 | + &::after { | |
| 2405 | + background-color: $color-primary70; | |
| 2406 | + height: 0.2rem; | |
| 2407 | + } | |
| 2408 | + &::after { | |
| 2409 | + transform: rotate(0deg); | |
| 2410 | + } | |
| 2411 | + } | |
| 2412 | + .chasi-cont { | |
| 2413 | + display: grid; | |
| 2414 | + } | |
| 2415 | + } | |
| 2416 | +} | |
| 2417 | +.info-block { | |
| 2418 | + dt { | |
| 2419 | + display: block; | |
| 2420 | + margin-bottom: $spacing-xsm; | |
| 2421 | + @include typo('tit-label'); | |
| 2422 | + } | |
| 2423 | + dd { | |
| 2424 | + margin-bottom: $spacing-lg; | |
| 2425 | + &:last-of-type { | |
| 2426 | + margin-bottom: 0; | |
| 2427 | + } | |
| 2428 | + } | |
| 2429 | + select { | |
| 2430 | + display: block; | |
| 2431 | + width: 100%; | |
| 2432 | + } | |
| 2433 | + .bg-border-box { | |
| 2434 | + overflow-y: scroll; | |
| 2435 | + height: 40rem; | |
| 2436 | + .border-box-list { | |
| 2437 | + &.small { | |
| 2438 | + gap: $spacing-2xsm; | |
| 2439 | + & > li { | |
| 2440 | + padding: $spacing-xsm $spacing-md; | |
| 2441 | + border-radius: $radius-sm; | |
| 2442 | + } | |
| 2443 | + .profile-area { | |
| 2444 | + .img-area { | |
| 2445 | + width: 3.2rem; | |
| 2446 | + height: 3.2rem; | |
| 2447 | + } | |
| 2448 | + .txt-area { | |
| 2449 | + font-weight: $size-font-weight-lg; | |
| 2450 | + font-size: $size-font-sm; | |
| 2451 | + padding-left: $spacing-2xsm; | |
| 2452 | + small { | |
| 2453 | + font-weight: $size-font-weight-md; | |
| 2454 | + font-size: $size-font-xsm; | |
| 2455 | + color: $color-font-default-tertiary; | |
| 2456 | + } | |
| 2457 | + } | |
| 2458 | + } | |
| 2459 | + } | |
| 2460 | + } | |
| 2461 | + } | |
| 2462 | +} | |
| 2463 | +.info-list { | |
| 2464 | + display: flex; | |
| 2465 | + flex-direction: column; | |
| 2466 | + gap: $spacing-lg; | |
| 2467 | + margin-bottom: $spacing-2xlg; | |
| 2468 | + &:last-child { | |
| 2469 | + margin-bottom: 0; | |
| 2470 | + } | |
| 2471 | + > li { | |
| 2472 | + display: flex; | |
| 2473 | + } | |
| 2474 | + cite, | |
| 2475 | + .info-tit { | |
| 2476 | + min-width: 8rem; | |
| 2477 | + padding-right: 2rem; | |
| 2478 | + @include typo('tit-label'); | |
| 2479 | + } | |
| 2480 | + .txt-area { | |
| 2481 | + flex: 1; | |
| 2482 | + min-width: 0; | |
| 2483 | + } | |
| 2484 | + &.sm { | |
| 2485 | + gap: $spacing-md; | |
| 2486 | + } | |
| 2487 | + &.xsm { | |
| 2488 | + gap: $spacing-xsm; | |
| 2489 | + } | |
| 2490 | + &.dir-row { | |
| 2491 | + flex-direction: row; | |
| 2492 | + flex-wrap: wrap; | |
| 2493 | + > li { | |
| 2494 | + flex: 1; | |
| 2495 | + } | |
| 2496 | + } | |
| 2497 | +} | |
| 2498 | +.info-block-list { | |
| 2499 | + margin-bottom: $spacing-lg; | |
| 2500 | + | |
| 2501 | + &:last-child { | |
| 2502 | + margin-bottom: 0; | |
| 2503 | + } | |
| 2504 | + > li { | |
| 2505 | + & ~ li { | |
| 2506 | + margin-top: $spacing-lg; | |
| 2507 | + } | |
| 2508 | + } | |
| 2509 | + .info-fnc-area{ | |
| 2510 | + @extend %flexArea; | |
| 2511 | + margin-bottom: $spacing-xsm; | |
| 2512 | + .l-area, | |
| 2513 | + .r-area { | |
| 2514 | + > * { | |
| 2515 | + margin:0; | |
| 2516 | + } | |
| 2517 | + } | |
| 2518 | + } | |
| 2519 | + cite, | |
| 2520 | + .info-tit { | |
| 2521 | + display: block; | |
| 2522 | + margin-bottom: $spacing-xsm; | |
| 2523 | + @include typo('tit-label'); | |
| 2524 | + } | |
| 2525 | + .txt-area { | |
| 2526 | + display: flex; | |
| 2527 | + gap: $spacing-2xsm; | |
| 2528 | + > * { | |
| 2529 | + flex: 1; | |
| 2530 | + } | |
| 2531 | + } | |
| 2532 | + | |
| 2533 | + &.fs-sm { | |
| 2534 | + > li { | |
| 2535 | + & ~ li { | |
| 2536 | + margin-top: $spacing-md; | |
| 2537 | + } | |
| 2538 | + } | |
| 2539 | + } | |
| 2540 | +} | |
| 2541 | + | |
| 2542 | +.info-inline-list { | |
| 2543 | + display: flex; | |
| 2544 | + flex-wrap: wrap; | |
| 2545 | + gap:$spacing-3xsm $spacing-md; | |
| 2546 | + font-weight:$size-font-weight-md; | |
| 2547 | + &.ellipsis { | |
| 2548 | + overflow: hidden; | |
| 2549 | + .txt-area { | |
| 2550 | + overflow: hidden; | |
| 2551 | + white-space: nowrap; | |
| 2552 | + text-overflow: ellipsis; | |
| 2553 | + display: block; | |
| 2554 | + max-width: 100%; | |
| 2555 | + } | |
| 2556 | + } | |
| 2557 | + li { | |
| 2558 | + position: relative; | |
| 2559 | + display: flex; | |
| 2560 | + align-items: center; | |
| 2561 | + color:$color-font-default-tertiary; | |
| 2562 | + gap: $spacing-3xsm; | |
| 2563 | + font-size:$size-font-xsm; | |
| 2564 | + min-width: 0; | |
| 2565 | + &:last-of-type { | |
| 2566 | + &::after { | |
| 2567 | + display: none; | |
| 2568 | + } | |
| 2569 | + } | |
| 2570 | + &::after { | |
| 2571 | + content: " "; | |
| 2572 | + position: absolute; | |
| 2573 | + right:-1.2rem; | |
| 2574 | + top:50%; | |
| 2575 | + width: .4rem; | |
| 2576 | + height: .4rem; | |
| 2577 | + margin-top:-.2rem; | |
| 2578 | + border-radius: 50%; | |
| 2579 | + background-color: $color-icon-disabled-primary; | |
| 2580 | + } | |
| 2581 | + } | |
| 2582 | + &.no-style { | |
| 2583 | + li { | |
| 2584 | + &::after { | |
| 2585 | + display: none; | |
| 2586 | + } | |
| 2587 | + } | |
| 2588 | + } | |
| 2589 | + i, | |
| 2590 | + cite, | |
| 2591 | + .info-tit { | |
| 2592 | + flex:none; | |
| 2593 | + } | |
| 2594 | + cite, | |
| 2595 | + .info-tit { | |
| 2596 | + font-weight: $size-font-weight-md; | |
| 2597 | + &::after { | |
| 2598 | + content: ":"; | |
| 2599 | + } | |
| 2600 | + } | |
| 2601 | + &.sm { | |
| 2602 | + &.no-style { | |
| 2603 | + gap: $spacing-3xsm $spacing-xsm; | |
| 2604 | + } | |
| 2605 | + li { | |
| 2606 | + i { | |
| 2607 | + width: 1.6rem; | |
| 2608 | + height: 1.6rem; | |
| 2609 | + } | |
| 2610 | + } | |
| 2611 | + } | |
| 2612 | +} | |
| 2613 | + | |
| 2614 | +.info-box-list { | |
| 2615 | + margin-bottom: $spacing-section-sm; | |
| 2616 | + display: grid; | |
| 2617 | + grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); | |
| 2618 | + gap:$spacing-xsm; | |
| 2619 | + // grid-auto-flow: row dense; | |
| 2620 | + > li { | |
| 2621 | + display: flex; | |
| 2622 | + justify-content: space-between; | |
| 2623 | + flex-wrap: wrap; | |
| 2624 | + align-items: center; | |
| 2625 | + height: 100%; | |
| 2626 | + border-radius: $radius-sm; | |
| 2627 | + background-color: $color-background-default-secondary; | |
| 2628 | + padding:$spacing-lg $spacing-md; | |
| 2629 | + gap:$spacing-xsm $spacing-md; | |
| 2630 | + > strong { | |
| 2631 | + @include typo('tit-sm'); | |
| 2632 | + color: $color-font-default-tertiary; | |
| 2633 | + } | |
| 2634 | + .txt-area { | |
| 2635 | + display: flex; | |
| 2636 | + flex-wrap: nowrap; | |
| 2637 | + gap:$spacing-3xsm; | |
| 2638 | + align-items: center; | |
| 2639 | + em { | |
| 2640 | + @include typo('tit-md'); | |
| 2641 | + } | |
| 2642 | + small { | |
| 2643 | + @include typo('body-md'); | |
| 2644 | + color: $color-font-default-primary; | |
| 2645 | + } | |
| 2646 | + &.dir-col { | |
| 2647 | + align-items: flex-end; | |
| 2648 | + &.center { | |
| 2649 | + align-items: center; | |
| 2650 | + } | |
| 2651 | + } | |
| 2652 | + } | |
| 2653 | + &.bg-primary { | |
| 2654 | + background-color: $color-background-brand-primary-inverse; | |
| 2655 | + color: $color-font-default-secondary-inverse; | |
| 2656 | + em { | |
| 2657 | + color: $color-font-default-primary-inverse; | |
| 2658 | + } | |
| 2659 | + } | |
| 2660 | + &.dir-col { | |
| 2661 | + >.txt-area { | |
| 2662 | + width: 100%; | |
| 2663 | + } | |
| 2664 | + | |
| 2665 | + } | |
| 2666 | + } | |
| 2667 | + | |
| 2668 | + &.col3 { | |
| 2669 | + grid-template-columns: repeat(3, 1fr); | |
| 2670 | + > li:nth-last-child(2):nth-child(3n + 1) { | |
| 2671 | + grid-column: span 2; | |
| 2672 | + } | |
| 2673 | + > li:nth-last-child(1):nth-child(3n + 1) { | |
| 2674 | + grid-column: span 3; | |
| 2675 | + } | |
| 2676 | + } | |
| 2677 | + | |
| 2678 | +} | |
| 2679 | +.tag-area, | |
| 2680 | +.tag-add-area { | |
| 2681 | + display: flex; | |
| 2682 | + flex-wrap: wrap; | |
| 2683 | + gap: $spacing-2xsm; | |
| 2684 | + border-radius: $radius-sm; | |
| 2685 | + background-color: $color-background-default-primary; | |
| 2686 | + min-width: 0; | |
| 2687 | + @at-root .tag-add-area { | |
| 2688 | + border: $stroke-primary; | |
| 2689 | + padding: $spacing-xsm; | |
| 2690 | + } | |
| 2691 | +} | |
| 2692 | +.txt-area { | |
| 2693 | + .tag-area { | |
| 2694 | + &:only-child { | |
| 2695 | + padding: 0; | |
| 2696 | + } | |
| 2697 | + } | |
| 2698 | +} | |
| 2699 | +.tag { | |
| 2700 | + align-items: center; | |
| 2701 | + // height: 3.2rem; | |
| 2702 | + @include typo('label-sm'); | |
| 2703 | + border-radius: $spacing-2xsm; | |
| 2704 | + padding: 0.4rem 0.8rem; | |
| 2705 | + box-sizing: border-box; | |
| 2706 | + color: $color-font-default-tertiary; | |
| 2707 | + background-color: $color-background-default-secondary; | |
| 2708 | + display: inline-flex; | |
| 2709 | + gap: $spacing-2xsm; | |
| 2710 | + align-items: center; | |
| 2711 | + justify-content: center; | |
| 2712 | + max-width: 100%; | |
| 2713 | + overflow: hidden; | |
| 2714 | + // &::before { | |
| 2715 | + // content: "#"; | |
| 2716 | + // color: $color-font-default-quaternary; | |
| 2717 | + // font-weight: $size-font-weight-lg; | |
| 2718 | + // } | |
| 2719 | +} | |
| 2720 | +.info-list, | |
| 2721 | +.info-block-list { | |
| 2722 | + min-width: 0; | |
| 2723 | +} | |
| 2724 | + | |
| 2725 | +// .sticky-area { | |
| 2726 | +// display: flex; | |
| 2727 | +// gap: $spacing-2xlg; | |
| 2728 | +// } | |
| 2729 | + | |
| 2730 | +// .sticky-cont { | |
| 2731 | +// position: relative; | |
| 2732 | +// box-sizing: border-box; | |
| 2733 | +// width: 24rem; | |
| 2734 | +// flex: none; | |
| 2735 | +// .sticky { | |
| 2736 | +// position: sticky; | |
| 2737 | +// top: calc(var(--gnb-fnc-height) + 2rem); | |
| 2738 | +// } | |
| 2739 | +// } | |
| 2740 | +//sticky-area | |
| 2741 | +.sticky-area { | |
| 2742 | + .sticky-cont { | |
| 2743 | + position: relative; | |
| 2744 | + } | |
| 2745 | + .sticky{ | |
| 2746 | + position: sticky; | |
| 2747 | + top:calc(var(--header-height) + 4rem); | |
| 2748 | + z-index: 5; | |
| 2749 | + &.top0 { | |
| 2750 | + top:var(--header-height); | |
| 2751 | + } | |
| 2752 | + } | |
| 2753 | +} | |
| 2754 | +.sticky-x { | |
| 2755 | + position: sticky; | |
| 2756 | + background-color: $color-background-default-primary; | |
| 2757 | +} | |
| 2758 | + | |
| 2759 | +%filehide { | |
| 2760 | + position: absolute; | |
| 2761 | + left: 0; | |
| 2762 | + top: 0; | |
| 2763 | + right: 0; | |
| 2764 | + bottom: 0; | |
| 2765 | + padding: 0; | |
| 2766 | + overflow: hidden; | |
| 2767 | + border: 0; | |
| 2768 | + opacity: 0; | |
| 2769 | + text-indent: -99999px; | |
| 2770 | + max-width: 100%; | |
| 2771 | + min-width: 0; | |
| 2772 | + cursor: pointer; | |
| 2773 | + z-index: 2; | |
| 2774 | +} | |
| 2775 | +.file-custom { | |
| 2776 | + position: relative; | |
| 2777 | + display: flex; | |
| 2778 | + // flex: 1; | |
| 2779 | + max-width: 100%; | |
| 2780 | + gap:$spacing-2xsm $spacing-xsm; | |
| 2781 | + justify-content: flex-start; | |
| 2782 | + flex-wrap: wrap; | |
| 2783 | + min-width: 0; | |
| 2784 | + &:focus-within { | |
| 2785 | + @include focus-outline; | |
| 2786 | + } | |
| 2787 | + input[type=file] { | |
| 2788 | + @extend %filehide; | |
| 2789 | + } | |
| 2790 | + .btn { | |
| 2791 | + white-space: nowrap; | |
| 2792 | + flex:none; | |
| 2793 | + } | |
| 2794 | + .preview-area { | |
| 2795 | + &::before { | |
| 2796 | + content: " "; | |
| 2797 | + position: absolute; | |
| 2798 | + left: 50%; | |
| 2799 | + top: 50%; | |
| 2800 | + transform: translate(-50%, -50%); | |
| 2801 | + width: 1.6rem; | |
| 2802 | + height: 1.6rem; | |
| 2803 | + @include ico($size-icon-md, plus); | |
| 2804 | + } | |
| 2805 | + } | |
| 2806 | + .book-preview-area { | |
| 2807 | + position: relative; | |
| 2808 | + width: 16rem; | |
| 2809 | + aspect-ratio: 7/9; | |
| 2810 | + overflow: hidden; | |
| 2811 | + border: $stroke-secondary; | |
| 2812 | + box-sizing: border-box; | |
| 2813 | + border-radius: $radius-sm; | |
| 2814 | + &::before { | |
| 2815 | + content: " "; | |
| 2816 | + position: absolute; | |
| 2817 | + left: 50%; | |
| 2818 | + top: 50%; | |
| 2819 | + transform: translate(-50%, -50%); | |
| 2820 | + width: 1.6rem; | |
| 2821 | + height: 1.6rem; | |
| 2822 | + @include ico($size-icon-md, plus); | |
| 2823 | + } | |
| 2824 | + | |
| 2825 | + img { | |
| 2826 | + position: relative; | |
| 2827 | + z-index: 1; | |
| 2828 | + width: 100%; | |
| 2829 | + height: 100%; | |
| 2830 | + object-fit: cover; | |
| 2831 | + } | |
| 2832 | + } | |
| 2833 | + input[type=text] { | |
| 2834 | + flex: 1; | |
| 2835 | + width: auto; | |
| 2836 | + min-width: 16rem; | |
| 2837 | + } | |
| 2838 | +} | |
| 2839 | +.file-custom-full { | |
| 2840 | + position: absolute; | |
| 2841 | + inset: 0; | |
| 2842 | + overflow: hidden; | |
| 2843 | + min-width: 0; | |
| 2844 | + input[type=file] { | |
| 2845 | + @extend %filehide; | |
| 2846 | + } | |
| 2847 | +} | |
| 2848 | +%labelCus { | |
| 2849 | + label { | |
| 2850 | + position: relative; | |
| 2851 | + display: flex; | |
| 2852 | + flex: 1; | |
| 2853 | + border: $stroke-secondary; | |
| 2854 | + border-radius: $radius-sm; | |
| 2855 | + background-color: $color-background-default-secondary; | |
| 2856 | + padding-left: $form-height-md; | |
| 2857 | + min-width: 0; | |
| 2858 | + overflow: hidden; | |
| 2859 | + input[type=text] { | |
| 2860 | + border: none; | |
| 2861 | + border-left: $stroke-secondary; | |
| 2862 | + border-radius: $radius-none; | |
| 2863 | + width: auto; | |
| 2864 | + flex: 1; | |
| 2865 | + } | |
| 2866 | + &::before { | |
| 2867 | + content: " "; | |
| 2868 | + left: 1.4rem; | |
| 2869 | + top: 50%; | |
| 2870 | + margin-top: -1rem; | |
| 2871 | + position: absolute; | |
| 2872 | + } | |
| 2873 | + } | |
| 2874 | +} | |
| 2875 | +.url-add-area { | |
| 2876 | + display: flex; | |
| 2877 | + gap: $spacing-xsm; | |
| 2878 | + overflow: hidden; | |
| 2879 | + @extend %labelCus; | |
| 2880 | + label { | |
| 2881 | + &::before { | |
| 2882 | + @include ico($size-icon-md, link, $color-icon-default-secondary); | |
| 2883 | + } | |
| 2884 | + } | |
| 2885 | + .btn { | |
| 2886 | + min-width: 8rem; | |
| 2887 | + } | |
| 2888 | +} | |
| 2889 | +.file-add-txt-area { | |
| 2890 | + display: flex; | |
| 2891 | + gap: $spacing-xsm; | |
| 2892 | + overflow: hidden; | |
| 2893 | + .file-custom { | |
| 2894 | + flex: 1; | |
| 2895 | + overflow: hidden; | |
| 2896 | + @extend %labelCus; | |
| 2897 | + label { | |
| 2898 | + &::before { | |
| 2899 | + @include ico($size-icon-md, attach); | |
| 2900 | + } | |
| 2901 | + } | |
| 2902 | + } | |
| 2903 | + .btn { | |
| 2904 | + min-width: 8rem; | |
| 2905 | + } | |
| 2906 | +} | |
| 2907 | +.file-drag-area { | |
| 2908 | + position: relative; | |
| 2909 | + padding: $spacing-md $spacing-2xlg; | |
| 2910 | + border-radius: $radius-sm; | |
| 2911 | + border: $size-stroke-xsm dashed $color-stroke-default-secondary; | |
| 2912 | + background: $color-background-default-tertiary; | |
| 2913 | + display:flex; | |
| 2914 | + flex-direction: column; | |
| 2915 | + gap:$spacing-md; | |
| 2916 | + align-items: center; | |
| 2917 | + justify-content: center; | |
| 2918 | + text-align: center; | |
| 2919 | + &.is-dragover { | |
| 2920 | + background-color: $color-background-default-secondary; | |
| 2921 | + } | |
| 2922 | + .input-file { | |
| 2923 | + position: absolute; | |
| 2924 | + inset: 0; | |
| 2925 | + overflow: hidden; | |
| 2926 | + border: 0; | |
| 2927 | + opacity: 0; | |
| 2928 | + text-indent: -99999px; | |
| 2929 | + max-width: 100%; | |
| 2930 | + z-index: 1; | |
| 2931 | + cursor: pointer; | |
| 2932 | + } | |
| 2933 | +} | |
| 2934 | +.file-add-list { | |
| 2935 | + display: flex; | |
| 2936 | + flex-wrap: wrap; | |
| 2937 | + gap:$spacing-md; | |
| 2938 | + > li { | |
| 2939 | + display: flex; | |
| 2940 | + align-items: center; | |
| 2941 | + &::after { | |
| 2942 | + content: " "; | |
| 2943 | + display: block; | |
| 2944 | + margin-left:$spacing-md; | |
| 2945 | + width: 0.1rem; | |
| 2946 | + height:2.4rem; | |
| 2947 | + background-color: $color-background-default-tertiary; | |
| 2948 | + } | |
| 2949 | + &:last-child { | |
| 2950 | + &::after { | |
| 2951 | + display: none; | |
| 2952 | + } | |
| 2953 | + } | |
| 2954 | + } | |
| 2955 | +} | |
| 2956 | +.file-list, | |
| 2957 | +.file-down-list { | |
| 2958 | + display: grid; | |
| 2959 | + gap:$spacing-xsm; | |
| 2960 | + > li { | |
| 2961 | + display: flex; | |
| 2962 | + gap:$spacing-xsm; | |
| 2963 | + overflow: hidden; | |
| 2964 | + } | |
| 2965 | + a { | |
| 2966 | + display: flex; | |
| 2967 | + align-items: center; | |
| 2968 | + overflow: hidden; | |
| 2969 | + gap: $spacing-2xsm; | |
| 2970 | + p { | |
| 2971 | + @include ellipsis(1); | |
| 2972 | + } | |
| 2973 | + small { | |
| 2974 | + margin-left: $spacing-2xsm; | |
| 2975 | + color: $color-font-default-quaternary; | |
| 2976 | + } | |
| 2977 | + &:hover { | |
| 2978 | + text-decoration: underline; | |
| 2979 | + } | |
| 2980 | + } | |
| 2981 | +} | |
| 2982 | + | |
| 2983 | +.file-down-list { | |
| 2984 | + a { | |
| 2985 | + &::before { | |
| 2986 | + content: " "; | |
| 2987 | + display: inline-block; | |
| 2988 | + vertical-align: middle; | |
| 2989 | + @include ico($size-icon-sm, attach, $color-icon-default-secondary); | |
| 2990 | + } | |
| 2991 | + } | |
| 2992 | +} | |
| 2993 | + | |
| 2994 | +.item-list-box { | |
| 2995 | + position: static; | |
| 2996 | + border: $stroke-secondary; | |
| 2997 | + border-radius: $radius-sm; | |
| 2998 | + background-color: $color-background-default-primary; | |
| 2999 | + height: auto; | |
| 3000 | + max-height: 11.1rem; | |
| 3001 | + box-sizing: border-box; | |
| 3002 | + overflow-x: hidden; | |
| 3003 | + overflow-y: auto; | |
| 3004 | + min-width: 0; | |
| 3005 | + // &.h-auto { | |
| 3006 | + // height: auto; | |
| 3007 | + // max-height: 11.1rem; | |
| 3008 | + // } | |
| 3009 | + &.h-fixed { | |
| 3010 | + height: 11.1rem; | |
| 3011 | + } | |
| 3012 | + .item { | |
| 3013 | + position: relative; | |
| 3014 | + display: flex; | |
| 3015 | + min-height: 3.6rem; | |
| 3016 | + padding: $spacing-2xsm $spacing-md; | |
| 3017 | + box-sizing: border-box; | |
| 3018 | + display: flex; | |
| 3019 | + align-items: center; | |
| 3020 | + overflow: hidden; | |
| 3021 | + gap: 0 $spacing-xsm; | |
| 3022 | + &:nth-of-type(2n) { | |
| 3023 | + background-color: $color-background-default-secondary; | |
| 3024 | + } | |
| 3025 | + &.hover:hover { | |
| 3026 | + background-color: $color-background-brand-primary; | |
| 3027 | + } | |
| 3028 | + .txt-area { | |
| 3029 | + display: flex; | |
| 3030 | + min-width: 0; | |
| 3031 | + flex: 1; | |
| 3032 | + align-items: center; | |
| 3033 | + gap: $spacing-2xsm; | |
| 3034 | + >strong, | |
| 3035 | + i { | |
| 3036 | + flex: none; | |
| 3037 | + } | |
| 3038 | + .txt { | |
| 3039 | + width: auto; | |
| 3040 | + word-break: break-all; | |
| 3041 | + max-width: 100%; | |
| 3042 | + @include ellipsis(1); | |
| 3043 | + } | |
| 3044 | + small { | |
| 3045 | + color: $color-font-default-quaternary; | |
| 3046 | + white-space: nowrap; | |
| 3047 | + } | |
| 3048 | + } | |
| 3049 | + .item-fnc-area { | |
| 3050 | + display: flex; | |
| 3051 | + align-items: center; | |
| 3052 | + gap: $spacing-2xsm $spacing-xsm; | |
| 3053 | + } | |
| 3054 | + } | |
| 3055 | + &.row1 { | |
| 3056 | + height:4rem; | |
| 3057 | + } | |
| 3058 | + &:empty { | |
| 3059 | + opacity: 0; | |
| 3060 | + position: absolute; | |
| 3061 | + z-index: -9999; | |
| 3062 | + } | |
| 3063 | +} | |
| 3064 | + | |
| 3065 | +.chasi-list-box{ | |
| 3066 | + font-size: $size-font-xsm; | |
| 3067 | + border: $stroke-secondary; | |
| 3068 | + border-radius: $radius-sm; | |
| 3069 | + background-color: $color-background-default-secondary; | |
| 3070 | + height: 12rem; | |
| 3071 | + box-sizing: border-box; | |
| 3072 | + overflow-x: hidden; | |
| 3073 | + overflow-y: auto; | |
| 3074 | + min-width: 0; | |
| 3075 | + padding: $spacing-md; | |
| 3076 | + &.h-auto { | |
| 3077 | + height: auto; | |
| 3078 | + min-height: 12rem; | |
| 3079 | + } | |
| 3080 | + .item { | |
| 3081 | + position: relative; | |
| 3082 | + display: flex; | |
| 3083 | + box-sizing: border-box; | |
| 3084 | + display: flex; | |
| 3085 | + align-items: center; | |
| 3086 | + overflow: hidden; | |
| 3087 | + gap: 0 $spacing-xsm; | |
| 3088 | + & ~ .item { | |
| 3089 | + margin-top: 0.8rem; | |
| 3090 | + } | |
| 3091 | + .txt-area { | |
| 3092 | + display: flex; | |
| 3093 | + min-width: 0; | |
| 3094 | + flex: 1; | |
| 3095 | + align-items: center; | |
| 3096 | + gap: $spacing-2xsm; | |
| 3097 | + .txt { | |
| 3098 | + width: auto; | |
| 3099 | + word-break: break-all; | |
| 3100 | + max-width: 100%; | |
| 3101 | + } | |
| 3102 | + } | |
| 3103 | + .item-fnc-area { | |
| 3104 | + display: flex; | |
| 3105 | + align-items: center; | |
| 3106 | + gap: $spacing-2xsm $spacing-xsm; | |
| 3107 | + } | |
| 3108 | + button { | |
| 3109 | + opacity: .5; | |
| 3110 | + &:hover { | |
| 3111 | + opacity: 1; | |
| 3112 | + } | |
| 3113 | + } | |
| 3114 | + } | |
| 3115 | + .txt-none { | |
| 3116 | + padding-top: 0; | |
| 3117 | + padding-bottom: 0; | |
| 3118 | + height: 100%; | |
| 3119 | + justify-content: center; | |
| 3120 | + } | |
| 3121 | + &.row1 { | |
| 3122 | + height:4rem; | |
| 3123 | + } | |
| 3124 | +} | |
| 3125 | + | |
| 3126 | +.item-list-inline-box { | |
| 3127 | + display: flex; | |
| 3128 | + flex-wrap: wrap; | |
| 3129 | + gap: $spacing-2xsm $spacing-lg; | |
| 3130 | + border: $stroke-secondary; | |
| 3131 | + border-radius: $radius-sm; | |
| 3132 | + background-color: $color-background-default-secondary; | |
| 3133 | + box-sizing: border-box; | |
| 3134 | + overflow-x: hidden; | |
| 3135 | + overflow-y: auto; | |
| 3136 | + min-width: 0; | |
| 3137 | + padding: $spacing-md; | |
| 3138 | + min-height: 5.6rem; | |
| 3139 | + box-sizing: border-box; | |
| 3140 | + .item { | |
| 3141 | + display: inline-flex; | |
| 3142 | + min-height: 2.4rem; | |
| 3143 | + box-sizing: border-box; | |
| 3144 | + display: flex; | |
| 3145 | + align-items: center; | |
| 3146 | + gap: 0 $spacing-xsm; | |
| 3147 | + .txt-area { | |
| 3148 | + display: flex; | |
| 3149 | + min-width: 0; | |
| 3150 | + align-items: center; | |
| 3151 | + gap: $spacing-2xsm; | |
| 3152 | + i { | |
| 3153 | + flex: none; | |
| 3154 | + } | |
| 3155 | + .txt { | |
| 3156 | + width: auto; | |
| 3157 | + max-width: 100%; | |
| 3158 | + } | |
| 3159 | + small { | |
| 3160 | + color: $color-font-default-quaternary; | |
| 3161 | + } | |
| 3162 | + } | |
| 3163 | + .item-fnc-area { | |
| 3164 | + display: flex; | |
| 3165 | + align-items: center; | |
| 3166 | + gap: 0.4rem 0.8rem; | |
| 3167 | + } | |
| 3168 | + } | |
| 3169 | +} | |
| 3170 | + | |
| 3171 | +.item-add-area { | |
| 3172 | + display: flex; | |
| 3173 | + flex-wrap: wrap; | |
| 3174 | + align-self: stretch; | |
| 3175 | + padding: $spacing-xsm $spacing-sm; | |
| 3176 | + gap: $spacing-xsm; | |
| 3177 | + border-radius: $radius-sm; | |
| 3178 | + background: $color-background-default-tertiary; | |
| 3179 | + margin-top: $spacing-xsm !important; | |
| 3180 | + | |
| 3181 | + &:first-child { | |
| 3182 | + margin-top: 0; | |
| 3183 | + } | |
| 3184 | + | |
| 3185 | + &:empty, | |
| 3186 | + &:has(.item-list:empty) { | |
| 3187 | + display: none; | |
| 3188 | + } | |
| 3189 | +} | |
| 3190 | + | |
| 3191 | +.preview-area { | |
| 3192 | + position: relative; | |
| 3193 | + width: 16rem; | |
| 3194 | + aspect-ratio: 16/9; | |
| 3195 | + // height: 9rem; | |
| 3196 | + overflow: hidden; | |
| 3197 | + background-color: $color-background-default-secondary; | |
| 3198 | + border: $stroke-secondary; | |
| 3199 | + box-sizing: border-box; | |
| 3200 | + border-radius: $radius-sm; | |
| 3201 | + img { | |
| 3202 | + position: relative; | |
| 3203 | + z-index: 1; | |
| 3204 | + width: 100%; | |
| 3205 | + height: 100%; | |
| 3206 | + object-fit: cover; | |
| 3207 | + } | |
| 3208 | +} | |
| 3209 | + | |
| 3210 | +.file-add-area { | |
| 3211 | + display: flex; | |
| 3212 | + gap:$spacing-2xsm $spacing-xsm; | |
| 3213 | + align-items: center; | |
| 3214 | + box-sizing: border-box; | |
| 3215 | + flex: 1; | |
| 3216 | + width: 100%; | |
| 3217 | + overflow: hidden; | |
| 3218 | + flex-wrap: wrap; | |
| 3219 | + min-width:0; | |
| 3220 | + .item-area { | |
| 3221 | + flex: 1; | |
| 3222 | + min-width: 0; | |
| 3223 | + } | |
| 3224 | + .item { | |
| 3225 | + display: flex; | |
| 3226 | + gap: $spacing-2xsm; | |
| 3227 | + align-items: center; | |
| 3228 | + .txt { | |
| 3229 | + max-width: calc(100% - 4rem); | |
| 3230 | + @include ellipsis(1); | |
| 3231 | + width: auto; | |
| 3232 | + word-break: break-all; | |
| 3233 | + font-size: 1.4rem; | |
| 3234 | + box-sizing: border-box; | |
| 3235 | + } | |
| 3236 | + } | |
| 3237 | + small { | |
| 3238 | + display: block; | |
| 3239 | + width: 100%; | |
| 3240 | + margin-top: $spacing-2xsm; | |
| 3241 | + } | |
| 3242 | + .url-add-area { | |
| 3243 | + flex: 1; | |
| 3244 | + } | |
| 3245 | +} | |
| 3246 | + | |
| 3247 | +.sel-txt-list { | |
| 3248 | + margin-top: $spacing-2xsm; | |
| 3249 | + font-size: 1.4rem; | |
| 3250 | + display: flex; | |
| 3251 | + flex-direction: column; | |
| 3252 | + gap: $spacing-2xsm; | |
| 3253 | + li { | |
| 3254 | + display: flex; | |
| 3255 | + flex-wrap: wrap; | |
| 3256 | + gap: $spacing-xsm; | |
| 3257 | + } | |
| 3258 | + span { | |
| 3259 | + &:after { | |
| 3260 | + content: " "; | |
| 3261 | + display: inline-block; | |
| 3262 | + vertical-align: middle; | |
| 3263 | + margin-left: $spacing-xsm; | |
| 3264 | + margin-top: -0.2rem; | |
| 3265 | + width: 0.4rem; | |
| 3266 | + height: 0.4rem; | |
| 3267 | + border-top: $stroke-secondary; | |
| 3268 | + border-right: $stroke-secondary; | |
| 3269 | + transform-origin: center center; | |
| 3270 | + transform: rotate(45deg); | |
| 3271 | + box-sizing: border-box; | |
| 3272 | + } | |
| 3273 | + &:last-of-type:after { | |
| 3274 | + display: none; | |
| 3275 | + } | |
| 3276 | + } | |
| 3277 | +} | |
| 3278 | +.sel-txt-inline-list { | |
| 3279 | + display: flex; | |
| 3280 | + flex-wrap: wrap; | |
| 3281 | + gap:$spacing-md; | |
| 3282 | + li { | |
| 3283 | + display: flex; | |
| 3284 | + gap:$spacing-2xsm; | |
| 3285 | + color: $color-font-brand-primary; | |
| 3286 | + } | |
| 3287 | +} | |
| 3288 | +%txt-none { | |
| 3289 | + display: flex; | |
| 3290 | + flex-direction: column; | |
| 3291 | + justify-content: center; | |
| 3292 | + gap:$spacing-2xsm; | |
| 3293 | + align-items: center; | |
| 3294 | + text-align: center; | |
| 3295 | + color: $color-font-default-tertiary; | |
| 3296 | + padding-top: 8rem; | |
| 3297 | + padding-bottom: 8rem; | |
| 3298 | + word-break: keep-all; | |
| 3299 | + font-size: $size-font-xsm; | |
| 3300 | + width: 100%; | |
| 3301 | + strong { | |
| 3302 | + @include typo('tit-xsm'); | |
| 3303 | + } | |
| 3304 | + em { | |
| 3305 | + @include typo('tit-md'); | |
| 3306 | + margin-bottom: $spacing-xsm; | |
| 3307 | + } | |
| 3308 | + .btn-area { | |
| 3309 | + display: flex; | |
| 3310 | + gap: $spacing-2xsm; | |
| 3311 | + margin-top: $spacing-md; | |
| 3312 | + } | |
| 3313 | + figure { | |
| 3314 | + margin-bottom: $spacing-sm; | |
| 3315 | + img { | |
| 3316 | + display: block; | |
| 3317 | + width: 100%; | |
| 3318 | + } | |
| 3319 | + } | |
| 3320 | + &.custom { | |
| 3321 | + figure { | |
| 3322 | + mix-blend-mode: luminosity; | |
| 3323 | + opacity: 0.4; | |
| 3324 | + } | |
| 3325 | + } | |
| 3326 | + &.spacing-none { | |
| 3327 | + padding-top: 0; | |
| 3328 | + padding-bottom: 0; | |
| 3329 | + } | |
| 3330 | + &.spacing-sm { | |
| 3331 | + padding-top: 4rem; | |
| 3332 | + padding-bottom: 4rem; | |
| 3333 | + } | |
| 3334 | + &.sm { | |
| 3335 | + figure { | |
| 3336 | + width: 4rem; | |
| 3337 | + height: 4rem; | |
| 3338 | + margin-bottom: $spacing-2xsm; | |
| 3339 | + } | |
| 3340 | + } | |
| 3341 | +} | |
| 3342 | +.txt-none { | |
| 3343 | + @extend %txt-none; | |
| 3344 | +} | |
| 3345 | +.txt-none-box { | |
| 3346 | + @extend %txt-none; | |
| 3347 | + position: absolute; | |
| 3348 | + top: 50%; | |
| 3349 | + left: 50%; | |
| 3350 | + width: calc(100% - 2.4rem); | |
| 3351 | + transform: translate(-50%, -50%); | |
| 3352 | +} | |
| 3353 | +.row-bar { | |
| 3354 | + display: flex; | |
| 3355 | + &> * { | |
| 3356 | + flex: 1; | |
| 3357 | + padding: 0 0.8rem; | |
| 3358 | + border-left: $stroke-secondary; | |
| 3359 | + &:first-child { | |
| 3360 | + padding-left: 0; | |
| 3361 | + border-left: none; | |
| 3362 | + } | |
| 3363 | + &:last-child { | |
| 3364 | + padding-right: 0; | |
| 3365 | + } | |
| 3366 | + } | |
| 3367 | +} | |
| 3368 | + | |
| 3369 | +.tip-txt { | |
| 3370 | + gap: $spacing-2xsm; | |
| 3371 | + align-items: center; | |
| 3372 | + margin-top:$spacing-2xsm; | |
| 3373 | + background-color: $color-background-default-tertiary; | |
| 3374 | + border-radius: 2em; | |
| 3375 | + padding:0.4rem; | |
| 3376 | + @include typo('body-sm'); | |
| 3377 | + &::before { | |
| 3378 | + content: " "; | |
| 3379 | + display: inline-flex; | |
| 3380 | + @include ico($size-icon-md, info, $color-icon-default-secondary); | |
| 3381 | + } | |
| 3382 | + @at-root .tip-area .tip-txt { | |
| 3383 | + display: none; | |
| 3384 | + } | |
| 3385 | +} | |
| 3386 | + | |
| 3387 | +.etc-fnc-area { | |
| 3388 | + position: relative; | |
| 3389 | + display: inline-flex; | |
| 3390 | + flex-direction: column; | |
| 3391 | + align-items: flex-end; | |
| 3392 | + font-size: 1.3rem; | |
| 3393 | + z-index: 2; | |
| 3394 | + .etc-fnc { | |
| 3395 | + position: absolute; | |
| 3396 | + top: 2.4rem; | |
| 3397 | + right: 0; | |
| 3398 | + display: none; | |
| 3399 | + border: $stroke-secondary; | |
| 3400 | + border-radius: $radius-xsm; | |
| 3401 | + li { | |
| 3402 | + background-color: $color-background-default-primary; | |
| 3403 | + &:hover { | |
| 3404 | + background-color: $color-background-default-secondary; | |
| 3405 | + } | |
| 3406 | + &> * { | |
| 3407 | + display: flex; | |
| 3408 | + padding: $spacing-xsm $spacing-md; | |
| 3409 | + text-align: left; | |
| 3410 | + white-space: nowrap; | |
| 3411 | + text-align: center; | |
| 3412 | + align-items: center; | |
| 3413 | + justify-content: center; | |
| 3414 | + text-align: center; | |
| 3415 | + width: 100%; | |
| 3416 | + } | |
| 3417 | + & ~ li { | |
| 3418 | + border-top: $stroke-secondary; | |
| 3419 | + } | |
| 3420 | + button:focus:not(:focus-visible), | |
| 3421 | + a:focus:not(:focus-visible) { | |
| 3422 | + @include focus-outline; | |
| 3423 | + } | |
| 3424 | + } | |
| 3425 | + } | |
| 3426 | + &.is-active { | |
| 3427 | + z-index: 3; | |
| 3428 | + .etc-fnc { | |
| 3429 | + display: block; | |
| 3430 | + } | |
| 3431 | + } | |
| 3432 | +} | |
| 3433 | +.view-area { | |
| 3434 | + // position: relative; | |
| 3435 | + // display: flex; | |
| 3436 | + // flex-wrap: wrap; | |
| 3437 | + display: grid; | |
| 3438 | + gap:$spacing-lg; | |
| 3439 | + .view-header { | |
| 3440 | + @extend %flexArea; | |
| 3441 | + gap:$spacing-lg; | |
| 3442 | + > .l-area, | |
| 3443 | + > .r-area { | |
| 3444 | + gap:$spacing-xsm; | |
| 3445 | + } | |
| 3446 | + > .l-area { | |
| 3447 | + flex-direction: column; | |
| 3448 | + align-items: flex-start; | |
| 3449 | + } | |
| 3450 | + > .r-area { | |
| 3451 | + flex:none; | |
| 3452 | + } | |
| 3453 | + time { | |
| 3454 | + color: $color-font-default-tertiary; | |
| 3455 | + } | |
| 3456 | + } | |
| 3457 | + .view-body { | |
| 3458 | + display: grid; | |
| 3459 | + gap:$spacing-lg; | |
| 3460 | + } | |
| 3461 | + .view-box { | |
| 3462 | + position: relative; | |
| 3463 | + display: block; | |
| 3464 | + width: 100%; | |
| 3465 | + height: 0; | |
| 3466 | + padding-top: 56.56%; | |
| 3467 | + background: $color-background-default-secondary; | |
| 3468 | + overflow: hidden; | |
| 3469 | + border-radius: $radius-md; | |
| 3470 | + border: $stroke-secondary; | |
| 3471 | + .img-area, | |
| 3472 | + .video-area, | |
| 3473 | + .pdf-area, | |
| 3474 | + .doc-area, | |
| 3475 | + .quiz-area, | |
| 3476 | + .iframe-area { | |
| 3477 | + position: absolute; | |
| 3478 | + left: 0; | |
| 3479 | + top: 0; | |
| 3480 | + right: 0; | |
| 3481 | + bottom: 0; | |
| 3482 | + } | |
| 3483 | + .quiz-area { | |
| 3484 | + padding: 4rem; | |
| 3485 | + background-color: $color-background-default-primary; | |
| 3486 | + overflow-y: auto; | |
| 3487 | + } | |
| 3488 | + } | |
| 3489 | + .img-area { | |
| 3490 | + figure { | |
| 3491 | + @include img-size; | |
| 3492 | + } | |
| 3493 | + } | |
| 3494 | + .view-txt { | |
| 3495 | + word-break: break-all; | |
| 3496 | + border:.1em solid $color-gray30; | |
| 3497 | + border-radius: $radius-md; | |
| 3498 | + padding:4rem; | |
| 3499 | + @include typo('body-lg'); | |
| 3500 | + img { | |
| 3501 | + max-width: 100%; | |
| 3502 | + } | |
| 3503 | + } | |
| 3504 | +} | |
| 3505 | +.view-editor-cont { | |
| 3506 | + table { | |
| 3507 | + border:$stroke-secondary; | |
| 3508 | + th, | |
| 3509 | + td { | |
| 3510 | + border: $stroke-secondary; | |
| 3511 | + padding:$spacing-xsm; | |
| 3512 | + } | |
| 3513 | + } | |
| 3514 | +} | |
| 3515 | +.board-view-area { | |
| 3516 | + display: grid; | |
| 3517 | + gap:$spacing-lg; | |
| 3518 | + .view-header { | |
| 3519 | + @extend %flexArea; | |
| 3520 | + gap:$spacing-lg; | |
| 3521 | + flex-wrap: wrap; | |
| 3522 | + > .l-area, | |
| 3523 | + > .r-area { | |
| 3524 | + gap:$spacing-xsm; | |
| 3525 | + } | |
| 3526 | + > .l-area { | |
| 3527 | + flex-direction: column; | |
| 3528 | + align-items: flex-start; | |
| 3529 | + } | |
| 3530 | + > .r-area { | |
| 3531 | + flex:none; | |
| 3532 | + align-self: flex-start; | |
| 3533 | + } | |
| 3534 | + .label-area { | |
| 3535 | + margin-bottom: $spacing-xsm; | |
| 3536 | + } | |
| 3537 | + time { | |
| 3538 | + color: $color-font-default-tertiary; | |
| 3539 | + } | |
| 3540 | + } | |
| 3541 | + .view-body { | |
| 3542 | + display: grid; | |
| 3543 | + gap:$spacing-lg; | |
| 3544 | + } | |
| 3545 | + .view-cont { | |
| 3546 | + display: grid; | |
| 3547 | + gap:$spacing-2xlg; | |
| 3548 | + border:$stroke-secondary; | |
| 3549 | + border-radius: $radius-md; | |
| 3550 | + padding:$spacing-lg; | |
| 3551 | + .tit-border-box-area { | |
| 3552 | + margin-bottom:0; | |
| 3553 | + } | |
| 3554 | + } | |
| 3555 | + .view-cont-fnc-area { | |
| 3556 | + padding-bottom: $spacing-md; | |
| 3557 | + border-bottom: $stroke-secondary; | |
| 3558 | + @extend %flexArea; | |
| 3559 | + flex-wrap: wrap | |
| 3560 | + } | |
| 3561 | + .view-cont-tit-area { | |
| 3562 | + @extend %flexArea; | |
| 3563 | + flex-wrap: wrap; | |
| 3564 | + .l-area, | |
| 3565 | + .c-area, | |
| 3566 | + .r-area { | |
| 3567 | + > * { | |
| 3568 | + margin-bottom: 0; | |
| 3569 | + } | |
| 3570 | + } | |
| 3571 | + padding: $spacing-md; | |
| 3572 | + border-radius: $radius-md; | |
| 3573 | + border: $size-stroke-sm solid $color-stroke-brand-primary-inverse; | |
| 3574 | + background: $color-background-brand-primary; | |
| 3575 | + } | |
| 3576 | + .view-cont-txt-area { | |
| 3577 | + // border:.1em solid $color-gray30; | |
| 3578 | + // border-radius: $radius-md; | |
| 3579 | + // padding:4rem; | |
| 3580 | + @include typo('body-lg'); | |
| 3581 | + word-break: break-all; | |
| 3582 | + img { | |
| 3583 | + max-width: 100%; | |
| 3584 | + } | |
| 3585 | + .img-area { | |
| 3586 | + figure { | |
| 3587 | + @include img-size; | |
| 3588 | + } | |
| 3589 | + } | |
| 3590 | + } | |
| 3591 | + .item-list-box + .item-list-box { | |
| 3592 | + margin-top: $spacing-xsm; | |
| 3593 | + } | |
| 3594 | + .view-cont-etc { | |
| 3595 | + display: grid; | |
| 3596 | + gap:$spacing-md; | |
| 3597 | + .view-section { | |
| 3598 | + padding: $spacing-lg; | |
| 3599 | + box-sizing: border-box; | |
| 3600 | + background-color: var(--color-background-default-secondary); | |
| 3601 | + border-radius: 1.6rem; | |
| 3602 | + min-width: 0; | |
| 3603 | + } | |
| 3604 | + .box { | |
| 3605 | + border-radius: $radius-md; | |
| 3606 | + border: $stroke-secondary; | |
| 3607 | + background: $color-background-default-primary; | |
| 3608 | + padding: $spacing-md; | |
| 3609 | + } | |
| 3610 | + } | |
| 3611 | + .view-box { | |
| 3612 | + position: relative; | |
| 3613 | + display: block; | |
| 3614 | + width: 100%; | |
| 3615 | + height: 0; | |
| 3616 | + padding-top: 56.56%; | |
| 3617 | + background: $color-background-default-secondary; | |
| 3618 | + overflow: hidden; | |
| 3619 | + border-radius: $radius-md; | |
| 3620 | + border: $stroke-secondary; | |
| 3621 | + .img-area, | |
| 3622 | + .video-area, | |
| 3623 | + .pdf-area, | |
| 3624 | + .doc-area, | |
| 3625 | + .quiz-area, | |
| 3626 | + .iframe-area { | |
| 3627 | + position: absolute; | |
| 3628 | + left: 0; | |
| 3629 | + top: 0; | |
| 3630 | + right: 0; | |
| 3631 | + bottom: 0; | |
| 3632 | + } | |
| 3633 | + .quiz-area { | |
| 3634 | + padding: 4rem; | |
| 3635 | + background-color: $color-background-default-primary; | |
| 3636 | + overflow-y: auto; | |
| 3637 | + } | |
| 3638 | + } | |
| 3639 | +} | |
| 3640 | + | |
| 3641 | +.badge-list { | |
| 3642 | + display: grid; | |
| 3643 | + grid-template-columns: repeat(6, 1fr); | |
| 3644 | + gap:$spacing-xsm; | |
| 3645 | + li { | |
| 3646 | + border:$stroke-secondary; | |
| 3647 | + border-radius: $radius-md; | |
| 3648 | + figure { | |
| 3649 | + display: flex; | |
| 3650 | + width: 100%; | |
| 3651 | + padding: $spacing-md; | |
| 3652 | + flex-direction: column; | |
| 3653 | + align-items: center; | |
| 3654 | + gap: $spacing-xsm; | |
| 3655 | + img { | |
| 3656 | + width: 6.4rem; | |
| 3657 | + height:6.4rem; | |
| 3658 | + opacity: .1; | |
| 3659 | + filter:grayscale(1) brightness(0.7) contrast(1.5); | |
| 3660 | + } | |
| 3661 | + | |
| 3662 | + } | |
| 3663 | + figcaption { | |
| 3664 | + color: $color-font-default-quaternary; | |
| 3665 | + text-align: center; | |
| 3666 | + word-break: keep-all; | |
| 3667 | + } | |
| 3668 | + &.is-active { | |
| 3669 | + border-color: $color-stroke-brand-primary; | |
| 3670 | + img { | |
| 3671 | + filter: none; | |
| 3672 | + opacity: 1; | |
| 3673 | + } | |
| 3674 | + figcaption { | |
| 3675 | + @include typo('tit-xsm'); | |
| 3676 | + } | |
| 3677 | + } | |
| 3678 | + } | |
| 3679 | +} | |
| 3680 | + | |
| 3681 | +.banner-area { | |
| 3682 | + display: flex; | |
| 3683 | + gap: $spacing-xsm $spacing-md; | |
| 3684 | + | |
| 3685 | + figure { | |
| 3686 | + img { | |
| 3687 | + display: block; | |
| 3688 | + width: 100%; | |
| 3689 | + } | |
| 3690 | + } | |
| 3691 | +} | |
| 3692 | + | |
| 3693 | +%book-thumb { | |
| 3694 | + border-radius: $radius-sm; | |
| 3695 | + border:$stroke-secondary; | |
| 3696 | + overflow: hidden; | |
| 3697 | + width: 100%; | |
| 3698 | + aspect-ratio: 7 / 9; | |
| 3699 | + img { | |
| 3700 | + display: block; | |
| 3701 | + object-fit: cover; | |
| 3702 | + width: 100%; | |
| 3703 | + height: 100%; | |
| 3704 | + } | |
| 3705 | +} | |
| 3706 | +.book-list { | |
| 3707 | + display: grid; | |
| 3708 | + grid-template-columns: repeat(5, 1fr); | |
| 3709 | + gap: $spacing-xlg $spacing-lg; | |
| 3710 | + li { | |
| 3711 | + display: flex; | |
| 3712 | + flex-direction: column; | |
| 3713 | + gap: $spacing-md; | |
| 3714 | + position: relative; | |
| 3715 | + overflow: hidden; | |
| 3716 | + .item-checkradio { | |
| 3717 | + position: absolute; | |
| 3718 | + top: $spacing-md; | |
| 3719 | + left: $spacing-md; | |
| 3720 | + } | |
| 3721 | + .img-area { | |
| 3722 | + figure { | |
| 3723 | + @extend %book-thumb; | |
| 3724 | + } | |
| 3725 | + } | |
| 3726 | + .txt-area { | |
| 3727 | + display: flex; | |
| 3728 | + flex-direction: column; | |
| 3729 | + align-items: center; | |
| 3730 | + gap: $spacing-2xsm; | |
| 3731 | + text-align: center; | |
| 3732 | + strong { | |
| 3733 | + @include typo('tit-sm'); | |
| 3734 | + @include ellipsis(1); | |
| 3735 | + } | |
| 3736 | + } | |
| 3737 | + } | |
| 3738 | + @for $i from 2 through 5 { | |
| 3739 | + &.col#{$i} { | |
| 3740 | + grid-template-columns: repeat(#{$i}, 1fr); | |
| 3741 | + } | |
| 3742 | + } | |
| 3743 | +} | |
| 3744 | + | |
| 3745 | + | |
| 3746 | +@include responsive(tablet) { | |
| 3747 | + .pc, .pc-flex { | |
| 3748 | + display: none !important; | |
| 3749 | + } | |
| 3750 | + .tamo { | |
| 3751 | + display:block !important; | |
| 3752 | + } | |
| 3753 | + .tamo-flex { | |
| 3754 | + display: flex !important; | |
| 3755 | + } | |
| 3756 | + .summary-info-list { | |
| 3757 | + display: grid; | |
| 3758 | + grid-template-columns: repeat(2, 1fr); | |
| 3759 | + grid-auto-flow: row; | |
| 3760 | + } | |
| 3761 | +} | |
| 3762 | + | |
| 3763 | +@include responsive(mobile) { | |
| 3764 | + .pcta, .pcta-flex { | |
| 3765 | + display: none !important; | |
| 3766 | + } | |
| 3767 | + .mo { | |
| 3768 | + display:block !important; | |
| 3769 | + } | |
| 3770 | + .mo-flex { | |
| 3771 | + display: flex !important; | |
| 3772 | + } | |
| 3773 | + | |
| 3774 | + //반응형 true | |
| 3775 | + [data-responsive="true"] { | |
| 3776 | + ul.pagenation, | |
| 3777 | + ol.pagenation { | |
| 3778 | + .ppv, | |
| 3779 | + .ffw { | |
| 3780 | + display: none; | |
| 3781 | + } | |
| 3782 | + overflow-x: auto; | |
| 3783 | + } | |
| 3784 | + .fnc-list { | |
| 3785 | + li { | |
| 3786 | + padding: $spacing-sm $spacing-none; | |
| 3787 | + } | |
| 3788 | + &.box { | |
| 3789 | + li { | |
| 3790 | + padding: $spacing-sm $spacing-md; | |
| 3791 | + min-height: 8rem; | |
| 3792 | + border-radius: $radius-sm; | |
| 3793 | + } | |
| 3794 | + } | |
| 3795 | + } | |
| 3796 | + .bg-box, | |
| 3797 | + .bg-border-box, | |
| 3798 | + .border-box { | |
| 3799 | + border-radius: $radius-sm; | |
| 3800 | + padding:$spacing-md; | |
| 3801 | + } | |
| 3802 | + // .border-box-list { | |
| 3803 | + // > li { | |
| 3804 | + // flex-direction: column; | |
| 3805 | + // align-items: flex-start | |
| 3806 | + // } | |
| 3807 | + // } | |
| 3808 | + .bg-area { | |
| 3809 | + padding: $spacing-md; | |
| 3810 | + } | |
| 3811 | + .item-list-box { | |
| 3812 | + .item { | |
| 3813 | + padding:$spacing-xsm; | |
| 3814 | + .txt-area { | |
| 3815 | + flex-wrap: wrap; | |
| 3816 | + > strong { | |
| 3817 | + width: 100%; | |
| 3818 | + } | |
| 3819 | + } | |
| 3820 | + } | |
| 3821 | + } | |
| 3822 | + .page-tit-area { | |
| 3823 | + margin-bottom: $spacing-xlg; | |
| 3824 | + flex-direction: column; | |
| 3825 | + align-items: center; | |
| 3826 | + justify-content: center; | |
| 3827 | + >.l-area, | |
| 3828 | + >.r-area { | |
| 3829 | + width:100%; | |
| 3830 | + justify-content: center; | |
| 3831 | + align-items: center; | |
| 3832 | + text-align:center; | |
| 3833 | + } | |
| 3834 | + } | |
| 3835 | + .search-area { | |
| 3836 | + width: 100%; | |
| 3837 | + // .search-option { | |
| 3838 | + // flex-direction: column; | |
| 3839 | + // } | |
| 3840 | + } | |
| 3841 | + .search-cus-area { | |
| 3842 | + height: 5.2rem; | |
| 3843 | + label { | |
| 3844 | + padding-left: 4.8rem; | |
| 3845 | + &::before { | |
| 3846 | + left: 1.4rem | |
| 3847 | + } | |
| 3848 | + input[type=text] { | |
| 3849 | + padding: $spacing-xsm $spacing-sm; | |
| 3850 | + @include typo ('tit-md'); | |
| 3851 | + } | |
| 3852 | + } | |
| 3853 | + button { | |
| 3854 | + padding: $spacing-none $spacing-md; | |
| 3855 | + } | |
| 3856 | + } | |
| 3857 | + .fnc-area { | |
| 3858 | + flex-direction: column; | |
| 3859 | + >.l-area, | |
| 3860 | + >.r-area { | |
| 3861 | + width: 100%; | |
| 3862 | + } | |
| 3863 | + >.l-area { | |
| 3864 | + order:1; | |
| 3865 | + min-height: initial; | |
| 3866 | + } | |
| 3867 | + } | |
| 3868 | + .fnc-extend-area { | |
| 3869 | + .extend-default-area { | |
| 3870 | + flex-direction: column; | |
| 3871 | + gap:$spacing-md; | |
| 3872 | + >.l-area { | |
| 3873 | + order:1; | |
| 3874 | + min-height: initial; | |
| 3875 | + } | |
| 3876 | + } | |
| 3877 | + } | |
| 3878 | + .extend-filter-area { | |
| 3879 | + padding: $spacing-xsm; | |
| 3880 | + flex-wrap: wrap; | |
| 3881 | + justify-content: flex-start; | |
| 3882 | + overflow: auto; | |
| 3883 | + >.l-area { | |
| 3884 | + order:1; | |
| 3885 | + } | |
| 3886 | + .filter-group { | |
| 3887 | + flex-wrap: nowrap; | |
| 3888 | + overflow-x: auto; | |
| 3889 | + gap:$spacing-2xsm; | |
| 3890 | + > * { | |
| 3891 | + flex:none; | |
| 3892 | + } | |
| 3893 | + } | |
| 3894 | + } | |
| 3895 | + .info-list { | |
| 3896 | + > li { | |
| 3897 | + flex-direction:column; | |
| 3898 | + gap:$spacing-xsm; | |
| 3899 | + } | |
| 3900 | + } | |
| 3901 | + .info-box-list { | |
| 3902 | + gap: $spacing-2xsm; | |
| 3903 | + > li { | |
| 3904 | + padding: $spacing-sm; | |
| 3905 | + .txt-area { | |
| 3906 | + flex-wrap: wrap; | |
| 3907 | + } | |
| 3908 | + } | |
| 3909 | + } | |
| 3910 | + .view-area { | |
| 3911 | + border-top:$stroke-secondary; | |
| 3912 | + border-bottom:$stroke-secondary; | |
| 3913 | + padding:$spacing-lg 0; | |
| 3914 | + .title-lg { | |
| 3915 | + display: flex; | |
| 3916 | + flex-direction: column; | |
| 3917 | + gap:$spacing-xsm; | |
| 3918 | + > * { | |
| 3919 | + width: fit-content; | |
| 3920 | + } | |
| 3921 | + } | |
| 3922 | + .view-txt { | |
| 3923 | + padding:$spacing-lg; | |
| 3924 | + border-radius:$radius-sm; | |
| 3925 | + } | |
| 3926 | + } | |
| 3927 | + .board-view-area { | |
| 3928 | + .view-cont { | |
| 3929 | + padding: $spacing-md; | |
| 3930 | + gap: $spacing-xlg; | |
| 3931 | + } | |
| 3932 | + .view-cont-tit-area { | |
| 3933 | + .l-area { | |
| 3934 | + &~ .r-area { | |
| 3935 | + width: 100%; | |
| 3936 | + border-top: $size-stroke-xsm solid $color-stroke-brand-primary-inverse; | |
| 3937 | + padding-top: $spacing-sm; | |
| 3938 | + justify-content: flex-start; | |
| 3939 | + } | |
| 3940 | + } | |
| 3941 | + } | |
| 3942 | + .view-cont-etc { | |
| 3943 | + .view-section { | |
| 3944 | + padding: $spacing-md; | |
| 3945 | + } | |
| 3946 | + } | |
| 3947 | + } | |
| 3948 | + | |
| 3949 | + .sticky-area { | |
| 3950 | + .sticky { | |
| 3951 | + position: static; | |
| 3952 | + top:initial; | |
| 3953 | + } | |
| 3954 | + } | |
| 3955 | + | |
| 3956 | + .book-list { | |
| 3957 | + gap:$spacing-md; | |
| 3958 | + grid-template-columns: repeat(2, 1fr) !important; | |
| 3959 | + } | |
| 3960 | + | |
| 3961 | + .summary-info-list { | |
| 3962 | + gap: $spacing-xsm; | |
| 3963 | + grid-template-columns: initial; | |
| 3964 | + li { | |
| 3965 | + flex-direction: column-reverse; | |
| 3966 | + gap: $spacing-md; | |
| 3967 | + padding: $spacing-md; | |
| 3968 | + align-items: flex-start; | |
| 3969 | + img { | |
| 3970 | + width: 4.8rem; | |
| 3971 | + height: 4.8rem; | |
| 3972 | + padding: $spacing-xsm; | |
| 3973 | + border-radius: $radius-sm; | |
| 3974 | + } | |
| 3975 | + .txt-area { | |
| 3976 | + h4 { | |
| 3977 | + margin-bottom: $spacing-2xsm; | |
| 3978 | + } | |
| 3979 | + } | |
| 3980 | + } | |
| 3981 | + } | |
| 3982 | + .summary-box { | |
| 3983 | + flex-direction: column; | |
| 3984 | + padding: $spacing-md; | |
| 3985 | + gap: $spacing-md; | |
| 3986 | + h3 { | |
| 3987 | + @include typo ('tit-md'); | |
| 3988 | + } | |
| 3989 | + .r-area:has(.bg-primary) { | |
| 3990 | + width: 100%; | |
| 3991 | + } | |
| 3992 | + .bg-primary { | |
| 3993 | + width: 100%; | |
| 3994 | + min-height: auto; | |
| 3995 | + } | |
| 3996 | + } | |
| 3997 | + | |
| 3998 | + .url-add-area { | |
| 3999 | + label::before { | |
| 4000 | + left: 1rem; | |
| 4001 | + } | |
| 4002 | + } | |
| 4003 | + | |
| 4004 | + .banner-area { | |
| 4005 | + flex-direction: column; | |
| 4006 | + } | |
| 4007 | + | |
| 4008 | + } | |
| 4009 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/component/_form.scss
... | ... | @@ -0,0 +1,1343 @@ |
| 1 | +input:not([type=checkbox]):not([type=radio]), | |
| 2 | +select, | |
| 3 | +textarea, | |
| 4 | +button { | |
| 5 | + font-family: $font-family; | |
| 6 | + font-size: inherit; | |
| 7 | + line-height: inherit; | |
| 8 | + color: inherit; | |
| 9 | + // vertical-align: middle; | |
| 10 | +} | |
| 11 | + | |
| 12 | +label.input-form-block>div, | |
| 13 | +label.input-form { | |
| 14 | + // 입력폼 전용으로 | |
| 15 | + display: flex; | |
| 16 | + align-items: flex-end; | |
| 17 | + @include typo('tit-xsm'); | |
| 18 | + &.input-block { | |
| 19 | + align-items: center; | |
| 20 | + } | |
| 21 | + | |
| 22 | + cite { | |
| 23 | + @include typo('body-sm'); | |
| 24 | + font-style: normal; | |
| 25 | + margin-left: auto; | |
| 26 | + } | |
| 27 | + | |
| 28 | + &.input-block, | |
| 29 | + &~.input-bundle:nth-of-type(1), | |
| 30 | + &~input[type=text]:nth-of-type(1), | |
| 31 | + &~input[type=search]:nth-of-type(1), | |
| 32 | + &~input[type=password]:nth-of-type(1), | |
| 33 | + &~input[type=number]:nth-of-type(1), | |
| 34 | + &~input[type=email]:nth-of-type(1), | |
| 35 | + &~input[type=tel]:nth-of-type(1), | |
| 36 | + &~input[type=time]:nth-of-type(1), | |
| 37 | + &~input[type=date]:nth-of-type(1), | |
| 38 | + &~input[type=datetime-local]:nth-of-type(1), | |
| 39 | + &~input[type=month]:nth-of-type(1), | |
| 40 | + &~input[type=week]:nth-of-type(1), | |
| 41 | + &~textarea:nth-of-type(1), | |
| 42 | + &~select:nth-of-type(1) { | |
| 43 | + margin-top: $spacing-xsm; | |
| 44 | + } | |
| 45 | +} | |
| 46 | + | |
| 47 | +%required { | |
| 48 | + content: '*'; | |
| 49 | + display: inline-flex; | |
| 50 | + margin-left: $spacing-2xsm; | |
| 51 | + color: $color-font-brand-accent; | |
| 52 | + font-size: $size-font-sm; | |
| 53 | +} | |
| 54 | +:has(>label.required), | |
| 55 | +:has(>label.input-form-block>input:required), | |
| 56 | +:has(>label.input-form-block>.input-block>input:required), | |
| 57 | +:has(>input:required){ | |
| 58 | + >label:not(:has(span))::after, | |
| 59 | + >div span:first-child::after, | |
| 60 | + >label span:first-child:after { | |
| 61 | + @extend %required; | |
| 62 | + } | |
| 63 | +} | |
| 64 | +i.required { | |
| 65 | + display: inline-flex; | |
| 66 | + font-size:0; | |
| 67 | + vertical-align:top; | |
| 68 | + &::after { | |
| 69 | + @extend %required; | |
| 70 | + } | |
| 71 | +} | |
| 72 | + | |
| 73 | +input[type=search] { | |
| 74 | + &::-webkit-search-cancel-button, | |
| 75 | + &::-webkit-search-decoration { | |
| 76 | + -webkit-appearance: none; | |
| 77 | + } | |
| 78 | +} | |
| 79 | + | |
| 80 | + | |
| 81 | +input[type=time], | |
| 82 | +input[type=date], | |
| 83 | +input[type=datetime-local], | |
| 84 | +input[type=month], | |
| 85 | +input[type=week] { | |
| 86 | + &.custom-datepicker { | |
| 87 | + -webkit-appearance: none; | |
| 88 | + // &::-webkit-datetime-edit-fields-wrapper, | |
| 89 | + &::-webkit-calendar-picker-indicator { | |
| 90 | + display: none; | |
| 91 | + } | |
| 92 | + } | |
| 93 | + | |
| 94 | + &[placeholder]:not([value]):not(:focus-visible) { | |
| 95 | + &::before{ | |
| 96 | + content: attr(placeholder); | |
| 97 | + width: 100%; | |
| 98 | + color: $color-gray50; | |
| 99 | + } | |
| 100 | + } | |
| 101 | + | |
| 102 | + &::-webkit-calendar-picker-indicator { | |
| 103 | + width: 2rem; | |
| 104 | + height: 2rem; | |
| 105 | + background-image: url(pathIcon(map-get($icons,"ico-calendar"), $color-gray50)); | |
| 106 | + } | |
| 107 | +} | |
| 108 | + | |
| 109 | +input[type=password]::-ms-reveal { | |
| 110 | + display: none; | |
| 111 | +} | |
| 112 | + | |
| 113 | +input[type=text], | |
| 114 | +input[type=search], | |
| 115 | +input[type=password], | |
| 116 | +input[type=number], | |
| 117 | +input[type=email], | |
| 118 | +input[type=tel], | |
| 119 | +input[type=time], | |
| 120 | +input[type=date], | |
| 121 | +input[type=datetime-local], | |
| 122 | +input[type=month], | |
| 123 | +input[type=week], | |
| 124 | +textarea { | |
| 125 | + padding: $spacing-xsm $spacing-md; | |
| 126 | + border: $stroke-primary; | |
| 127 | + border-radius: $radius-sm; | |
| 128 | + transition: all 0.2s; | |
| 129 | + color:$color-font-default-primary; | |
| 130 | + | |
| 131 | + &::selection { | |
| 132 | + color: $color-white; | |
| 133 | + background-color: $color-background-brand-accent-inverse; | |
| 134 | + } | |
| 135 | + | |
| 136 | + &::placeholder { | |
| 137 | + color: $color-font-default-quaternary; | |
| 138 | + } | |
| 139 | + | |
| 140 | + &:focus { | |
| 141 | + outline: 0; | |
| 142 | + border-color: $color-stroke-brand-primary; | |
| 143 | + box-shadow: inset 0 0 0 0.1rem $color-stroke-brand-primary; | |
| 144 | + } | |
| 145 | + | |
| 146 | + &:disabled { | |
| 147 | + color: $color-font-disabled-primary; | |
| 148 | + background-color: $color-background-disabled-primary; | |
| 149 | + border-color: $color-stroke-disabled-primary; | |
| 150 | + } | |
| 151 | + | |
| 152 | + &:read-only { | |
| 153 | + border-color: $color-stroke-default-tertiary; | |
| 154 | + box-shadow: none !important; | |
| 155 | + } | |
| 156 | + | |
| 157 | + // &.password.valid, // 비밀번호 보기 옵션이 있는 경우, 타입을 변경해야하므로 클래스를 추가해주어야 함 | |
| 158 | + // &[type=password].valid, //password 의 경우, 명확하게 valid 클래스가 선언되어야만 통과 | |
| 159 | + // &:not([type=password]):required:valid { | |
| 160 | + // border-color: $color-green50; | |
| 161 | + // &:focus { | |
| 162 | + // box-shadow: inset 0 0 0 0.1rem $color-green50; | |
| 163 | + // } | |
| 164 | + // } | |
| 165 | + | |
| 166 | + // &.password:not(.valid):not(:placeholder-shown), | |
| 167 | + // &[type=password]:not(.valid):not(:placeholder-shown), | |
| 168 | + // &:required:invalid:not(:placeholder-shown) { | |
| 169 | + // border-color: $color-red50; | |
| 170 | + // &:focus { | |
| 171 | + // box-shadow: inset 0 0 0 0.1rem $color-red50; | |
| 172 | + // } | |
| 173 | + // } | |
| 174 | + | |
| 175 | + &~cite:nth-of-type(1) { | |
| 176 | + display: block; | |
| 177 | + margin-top: $spacing-2xsm; | |
| 178 | + @include typo('body-sm'); | |
| 179 | + color: $color-gray50; | |
| 180 | + font-style: normal; | |
| 181 | + } | |
| 182 | + | |
| 183 | + &.sm { | |
| 184 | + height: 3.6rem; | |
| 185 | + padding-left: $spacing-md; | |
| 186 | + border-radius: $radius-xsm; | |
| 187 | + } | |
| 188 | +} | |
| 189 | +.input-block { | |
| 190 | + position: relative; | |
| 191 | + & ~ cite:nth-of-type(1) { | |
| 192 | + display: block; | |
| 193 | + margin-top: $spacing-2xsm; | |
| 194 | + @include typo('body-sm'); | |
| 195 | + color: $color-gray50; | |
| 196 | + font-style: normal; | |
| 197 | + } | |
| 198 | + label[class*="switch-"] { | |
| 199 | + position: absolute; | |
| 200 | + right: 1.2rem; | |
| 201 | + top: 50%; | |
| 202 | + transform: translate(0, -50%); | |
| 203 | + } | |
| 204 | + >input { | |
| 205 | + padding-right: $spacing-2xlg; | |
| 206 | + } | |
| 207 | +} | |
| 208 | + | |
| 209 | +.txt-count-area { | |
| 210 | + display: grid; | |
| 211 | + gap:$spacing-xsm; | |
| 212 | + .txt-count { | |
| 213 | + text-align: right; | |
| 214 | + font-size:$size-font-xsm; | |
| 215 | + color:$color-font-default-secondary; | |
| 216 | + } | |
| 217 | +} | |
| 218 | +input[type=text], | |
| 219 | +input[type=search], | |
| 220 | +input[type=password], | |
| 221 | +input[type=number], | |
| 222 | +input[type=email], | |
| 223 | +input[type=tel], | |
| 224 | +input[type=time], | |
| 225 | +input[type=date], | |
| 226 | +input[type=datetime-local], | |
| 227 | +input[type=month], | |
| 228 | +input[type=week] { | |
| 229 | + position: relative; | |
| 230 | + height: $form-height-md; | |
| 231 | + min-width: 24rem; | |
| 232 | + &[class*="ico-"] { | |
| 233 | + padding: $spacing-xsm $spacing-lg $spacing-xsm $spacing-2xlg; | |
| 234 | + background-size: 2.0rem; | |
| 235 | + background-repeat: no-repeat; | |
| 236 | + background-position: 1rem center; | |
| 237 | + background-color: $color-transparent; | |
| 238 | + &.right { | |
| 239 | + padding: $spacing-xsm $spacing-2xlg $spacing-xsm $spacing-lg; | |
| 240 | + background-position: right 1rem center; | |
| 241 | + } | |
| 242 | + | |
| 243 | + @each $cls, | |
| 244 | + $icon in $icons { | |
| 245 | + &.#{$cls} { | |
| 246 | + background-image: url(pathIcon(map-get($icons,#{$cls}))); | |
| 247 | + } | |
| 248 | + } | |
| 249 | + } | |
| 250 | +} | |
| 251 | + | |
| 252 | +input[type=number]::-webkit-outer-spin-button, | |
| 253 | +input[type=number]::-webkit-inner-spin-button { | |
| 254 | + -webkit-appearance: none; | |
| 255 | + margin: 0; | |
| 256 | +} | |
| 257 | + | |
| 258 | +input[type="date"] { | |
| 259 | + padding-right:1.2rem; | |
| 260 | + min-width: 16rem; | |
| 261 | +} | |
| 262 | + | |
| 263 | +textarea { | |
| 264 | + width: 100%; | |
| 265 | + min-height: 12.2rem; | |
| 266 | + resize: none; | |
| 267 | + padding: $spacing-md; | |
| 268 | +} | |
| 269 | + | |
| 270 | +input[type=checkbox], | |
| 271 | +input[type=radio], | |
| 272 | +label.checkbox input, | |
| 273 | +label.chip input, | |
| 274 | +label.radio input { | |
| 275 | + @include hideElement; | |
| 276 | + | |
| 277 | + &:disabled { | |
| 278 | + | |
| 279 | + &+label, | |
| 280 | + &+span { | |
| 281 | + color: $color-font-disabled-primary; | |
| 282 | + } | |
| 283 | + } | |
| 284 | + | |
| 285 | + &:focus-visible { | |
| 286 | + | |
| 287 | + &+label, | |
| 288 | + &+span { | |
| 289 | + outline: 0.2rem solid $color-stroke-brand-primary; | |
| 290 | + } | |
| 291 | + } | |
| 292 | +} | |
| 293 | + | |
| 294 | +input[type=checkbox]+label, | |
| 295 | +input[type=radio]+label, | |
| 296 | +label.toggle, | |
| 297 | +label.checkbox, | |
| 298 | +label[class*="switch"], | |
| 299 | +label.radio { | |
| 300 | + vertical-align: middle; | |
| 301 | + margin-right: $spacing-md; | |
| 302 | + | |
| 303 | + &:last-child { | |
| 304 | + margin-right: auto; | |
| 305 | + } | |
| 306 | +} | |
| 307 | + | |
| 308 | +input[type=checkbox]+label, | |
| 309 | +input[type=radio]+label, | |
| 310 | +label.toggle, | |
| 311 | +label.checkbox, | |
| 312 | +label.chip, | |
| 313 | +label.radio { | |
| 314 | + @include typo('body-md'); | |
| 315 | + display: inline-flex; | |
| 316 | + transition: all 0.2s; | |
| 317 | +} | |
| 318 | + | |
| 319 | +label.chip, | |
| 320 | +input.chip + label, | |
| 321 | +label.chip input + span { | |
| 322 | + margin-right: 0; | |
| 323 | +} | |
| 324 | + | |
| 325 | +input[type=checkbox]+label, | |
| 326 | +input[type=radio]+label, | |
| 327 | +label[class*="switch"] input+span, | |
| 328 | +label.checkbox input+span, | |
| 329 | +label.radio input+span { | |
| 330 | + position: relative; | |
| 331 | + display: inline-flex; | |
| 332 | + align-items: center; | |
| 333 | + gap: $spacing-xsm; | |
| 334 | +} | |
| 335 | + | |
| 336 | +input[type=checkbox]+label, | |
| 337 | +input[type=radio]+label, | |
| 338 | +label.checkbox input+span, | |
| 339 | +label.radio input+span { | |
| 340 | + &::before, | |
| 341 | + &::after { | |
| 342 | + content: ''; | |
| 343 | + display: inline-flex; | |
| 344 | + width: $size-icon-md; | |
| 345 | + height: $size-icon-md; | |
| 346 | + box-sizing: border-box; | |
| 347 | + transition: all 0.2s; | |
| 348 | + } | |
| 349 | + | |
| 350 | + &::before { | |
| 351 | + border: 0.2rem solid $color-stroke-default-secondary; | |
| 352 | + background-color: $color-background-default-primary; | |
| 353 | + } | |
| 354 | + | |
| 355 | + &::after { | |
| 356 | + position: absolute; | |
| 357 | + left: 0; | |
| 358 | + background-color: $color-icon-default-secondary; | |
| 359 | + } | |
| 360 | +} | |
| 361 | +input[type=checkbox]+label, | |
| 362 | +label.checkbox input+span { | |
| 363 | + | |
| 364 | + &::before, | |
| 365 | + &::after { | |
| 366 | + border-radius: $spacing-2xsm; | |
| 367 | + } | |
| 368 | + | |
| 369 | + &::after { | |
| 370 | + mask-size: cover; | |
| 371 | + mask-repeat: no-repeat; | |
| 372 | + mask-position: center; | |
| 373 | + mask-image: url(pathIcon(map-get($icons,"ico-form-check"))); | |
| 374 | + } | |
| 375 | +} | |
| 376 | + | |
| 377 | +input[type=radio]+label, | |
| 378 | +label.radio input+span { | |
| 379 | + | |
| 380 | + &::before, | |
| 381 | + &::after { | |
| 382 | + border-radius: 50%; | |
| 383 | + } | |
| 384 | + | |
| 385 | + &::after { | |
| 386 | + width: 0.8rem; | |
| 387 | + height: 0.8rem; | |
| 388 | + margin: 0.6rem; | |
| 389 | + } | |
| 390 | +} | |
| 391 | + | |
| 392 | +input[type=checkbox]:checked+label, | |
| 393 | +input[type=radio]:checked+label, | |
| 394 | +label.checkbox input:checked+span, | |
| 395 | +label.radio input:checked+span { | |
| 396 | + &::before { | |
| 397 | + border-color: $color-background-brand-primary-inverse; | |
| 398 | + background-color: $color-background-brand-primary-inverse; | |
| 399 | + } | |
| 400 | + &::after { | |
| 401 | + background-color: $color-background-default-primary; | |
| 402 | + } | |
| 403 | +} | |
| 404 | + | |
| 405 | +input[type=checkbox]:checked+label, | |
| 406 | +label.checkbox input:checked+span { | |
| 407 | + &::after { | |
| 408 | + mask-image: url(pathIcon(map-get($icons,"ico-form-check"))); | |
| 409 | + } | |
| 410 | +} | |
| 411 | + | |
| 412 | +input[type=checkbox]:disabled+label, | |
| 413 | +label.checkbox input:disabled+span, | |
| 414 | +input[type=radio]:disabled+label, | |
| 415 | +label.radio input:disabled+span { | |
| 416 | + &::before { | |
| 417 | + border-color: $color-stroke-disabled-primary; | |
| 418 | + background-color: $color-background-disabled-primary; | |
| 419 | + } | |
| 420 | + &::after { | |
| 421 | + background-color: $color-icon-disabled-primary; | |
| 422 | + display: none; | |
| 423 | + } | |
| 424 | +} | |
| 425 | + | |
| 426 | +input[type=checkbox]:disabled:checked+label, | |
| 427 | +input[type=radio]:disabled:checked+label, | |
| 428 | +label.checkbox input:disabled:checked+span, | |
| 429 | +label.radio input:disabled:checked+span { | |
| 430 | + &::before { | |
| 431 | + background-color: $color-background-disabled-primary; | |
| 432 | + } | |
| 433 | + &::after { | |
| 434 | + display: block; | |
| 435 | + background-color: $color-icon-disabled-primary; | |
| 436 | + } | |
| 437 | +} | |
| 438 | + | |
| 439 | +input[type=checkbox].toggle+label, | |
| 440 | +label.toggle input[type=checkbox]+span { | |
| 441 | + position: relative; | |
| 442 | + display: inline-flex; | |
| 443 | + align-items: center; | |
| 444 | + height: 2.4rem; | |
| 445 | + | |
| 446 | + &::before, | |
| 447 | + &::after { | |
| 448 | + content: ''; | |
| 449 | + transition: all 0.2s; | |
| 450 | + } | |
| 451 | + | |
| 452 | + &::before { | |
| 453 | + width: 4rem; | |
| 454 | + height: 100%; | |
| 455 | + border-radius: 1.2rem; | |
| 456 | + margin-right: $spacing-xsm; | |
| 457 | + background-color: $color-background-default-tertiary; | |
| 458 | + border-width: 0; | |
| 459 | + } | |
| 460 | + | |
| 461 | + &::after { | |
| 462 | + position: absolute; | |
| 463 | + left: 0.2rem; | |
| 464 | + width: 1.8rem; | |
| 465 | + height: 1.8rem; | |
| 466 | + border-radius: 50%; | |
| 467 | + background-color: $color-icon-default-primary-inverse; | |
| 468 | + mask-image: none; | |
| 469 | + } | |
| 470 | +} | |
| 471 | + | |
| 472 | +input[type=checkbox].toggle:checked+label, | |
| 473 | +label.toggle input[type=checkbox]:checked+span { | |
| 474 | + &::before { | |
| 475 | + background-color: $color-background-brand-primary-inverse; | |
| 476 | + } | |
| 477 | + | |
| 478 | + &::after { | |
| 479 | + left: 2rem; | |
| 480 | + } | |
| 481 | +} | |
| 482 | + | |
| 483 | +input[type=checkbox].toggle:disabled+label, | |
| 484 | +label.toggle input[type=checkbox]:disabled+span { | |
| 485 | + &::before { | |
| 486 | + background-color: $color-background-disabled-primary; | |
| 487 | + } | |
| 488 | + | |
| 489 | + &::after { | |
| 490 | + display: block; | |
| 491 | + background-color: $color-icon-disabled-primary; | |
| 492 | + } | |
| 493 | +} | |
| 494 | + | |
| 495 | +input.chip+label, | |
| 496 | +label.chip input+span { | |
| 497 | + display: inline-flex; | |
| 498 | + align-items: center; | |
| 499 | + gap: $spacing-2xsm; | |
| 500 | + height: 4rem; | |
| 501 | + padding: $spacing-xsm $spacing-md; | |
| 502 | + border-radius: 2em; | |
| 503 | + background-color: $color-background-brand-primary; | |
| 504 | + color: $color-font-brand-primary; | |
| 505 | + font-weight: $size-font-weight-lg; | |
| 506 | + transition: all 0.2s; | |
| 507 | + | |
| 508 | + &::before, | |
| 509 | + &::after { | |
| 510 | + content: none; | |
| 511 | + } | |
| 512 | +} | |
| 513 | + | |
| 514 | +input.chip:not(:disabled)+label:hover, | |
| 515 | +label.chip input:not(:disabled)+span:hover { | |
| 516 | + cursor: pointer; | |
| 517 | + filter: brightness(95%); | |
| 518 | +} | |
| 519 | + | |
| 520 | +input.chip:checked+label, | |
| 521 | +label.chip input:checked+span { | |
| 522 | + background-color: $color-background-brand-primary-inverse; | |
| 523 | + color: $color-font-default-primary-inverse; | |
| 524 | + &::before { | |
| 525 | + content: ""; | |
| 526 | + display: block; | |
| 527 | + @include ico($size-icon-sm, check, $color-icon-default-primary-inverse); | |
| 528 | + } | |
| 529 | +} | |
| 530 | + | |
| 531 | +input.chip:disabled+label, | |
| 532 | +label.chip input:disabled+span { | |
| 533 | + background-color: $color-background-disabled-primary; | |
| 534 | + color: $color-font-disabled-primary; | |
| 535 | +} | |
| 536 | + | |
| 537 | +input.chip:disabled:checked+label, | |
| 538 | +label.chip input:disabled:checked+span { | |
| 539 | + background-color: $color-background-disabled-primary; | |
| 540 | + color: $color-font-disabled-primary; | |
| 541 | + &::before { | |
| 542 | + @include ico($size-icon-sm, check, $color-icon-disabled-primary); | |
| 543 | + } | |
| 544 | +} | |
| 545 | + | |
| 546 | +a.chip, | |
| 547 | +button.chip { | |
| 548 | + display: inline-flex; | |
| 549 | + align-items: center; | |
| 550 | + gap: $spacing-xsm; | |
| 551 | + height: 4rem; | |
| 552 | + padding: $spacing-xsm $spacing-md; | |
| 553 | + border-radius: 2em; | |
| 554 | + background-color: $color-background-brand-primary; | |
| 555 | + color: $color-font-brand-primary; | |
| 556 | + font-weight: $size-font-weight-lg; | |
| 557 | + transition: all 0.2s; | |
| 558 | +} | |
| 559 | + | |
| 560 | + | |
| 561 | +.chip-area { | |
| 562 | + margin-bottom: $spacing-md; | |
| 563 | + display: flex; | |
| 564 | + flex-wrap: wrap; | |
| 565 | + gap: $spacing-2xsm; | |
| 566 | + &:only-child { | |
| 567 | + margin-bottom: 0; | |
| 568 | + } | |
| 569 | +} | |
| 570 | + | |
| 571 | +.chip-tag { | |
| 572 | + @include typo('body-md'); | |
| 573 | + display: inline-flex; | |
| 574 | + align-items: center; | |
| 575 | + gap: $spacing-2xsm; | |
| 576 | + height: 4rem; | |
| 577 | + padding: $spacing-xsm $spacing-md; | |
| 578 | + border-radius: 2em; | |
| 579 | + font-weight: $size-font-weight-lg; | |
| 580 | + transition: all 0.2s; | |
| 581 | + background-color: $color-background-default-primary; | |
| 582 | + color: $color-font-default-secondary; | |
| 583 | + border: $stroke-secondary; | |
| 584 | + | |
| 585 | + [class*="ico-"] { | |
| 586 | + &::before { | |
| 587 | + background-color: $color-icon-default-secondary; | |
| 588 | + } | |
| 589 | + } | |
| 590 | + | |
| 591 | + &.primary { | |
| 592 | + background-color: $color-background-brand-primary; | |
| 593 | + color: $color-font-brand-primary; | |
| 594 | + border: none; | |
| 595 | + | |
| 596 | + [class*="ico-"] { | |
| 597 | + &::before { | |
| 598 | + background-color: $color-icon-brand-primary; | |
| 599 | + } | |
| 600 | + } | |
| 601 | + } | |
| 602 | +} | |
| 603 | + | |
| 604 | +input.icon-only+label, | |
| 605 | +label.icon-only input+span { | |
| 606 | + display: inline-flex; | |
| 607 | + gap: 0 !important; | |
| 608 | + width: $size-icon-md; | |
| 609 | + white-space: nowrap; | |
| 610 | + overflow: hidden; | |
| 611 | + | |
| 612 | + &::before, | |
| 613 | + &::after { | |
| 614 | + flex: 0 0 auto; | |
| 615 | + } | |
| 616 | +} | |
| 617 | + | |
| 618 | +label[class*="switch-"] { | |
| 619 | + display: inline-flex; | |
| 620 | + cursor: pointer; | |
| 621 | + $swIcos : (switch-hide, ico-visibility, ico-visibility-off), (switch-show, ico-visibility-off, ico-visibility); | |
| 622 | + @each $swIco in $swIcos{ | |
| 623 | + &.#{nth($swIco, 1)} { | |
| 624 | + i[class*="ico-"] { | |
| 625 | + mask-image: url(pathIcon(map-get($icons,#{nth($swIco, 2)}))); | |
| 626 | + } | |
| 627 | + input:checked ~ span i[class*="ico-"] { | |
| 628 | + mask-image: url(pathIcon(map-get($icons,#{nth($swIco, 3)}))); | |
| 629 | + } | |
| 630 | + &:hover i[class*="ico-"] { | |
| 631 | + mask-image: url(pathIcon(map-get($icons,#{nth($swIco, 2)}))); | |
| 632 | + } | |
| 633 | + &:hover input:checked ~ span i[class*="ico-"] { | |
| 634 | + mask-image: url(pathIcon(map-get($icons,#{nth($swIco, 3)}),)); | |
| 635 | + } | |
| 636 | + } | |
| 637 | + } | |
| 638 | +} | |
| 639 | + | |
| 640 | +select { | |
| 641 | + appearance: none; | |
| 642 | + background: transparent; | |
| 643 | + border: none; | |
| 644 | + color: $color-gray80; | |
| 645 | + height: $form-height-md; | |
| 646 | + padding: 0 4rem 0 $spacing-md; | |
| 647 | + border: $stroke-primary; | |
| 648 | + border-radius: $radius-sm; | |
| 649 | + background-size: $size-icon-md; | |
| 650 | + background-repeat: no-repeat; | |
| 651 | + background-position: right $spacing-md center; | |
| 652 | + background-image: url(pathIcon(map-get($icons, "ico-down"), $color-icon-default-secondary)); | |
| 653 | + &.select-sort { | |
| 654 | + background-image: url(pathIcon(map-get($icons, "ico-sort"), $color-icon-default-secondary)); | |
| 655 | + } | |
| 656 | + &.small, | |
| 657 | + &.sm { | |
| 658 | + height: $form-height-sm; | |
| 659 | + padding-left: $spacing-md; | |
| 660 | + padding-right: 3.2rem; | |
| 661 | + background-position: right $spacing-xsm center; | |
| 662 | + background-size: $size-icon-sm; | |
| 663 | + } | |
| 664 | + | |
| 665 | + &:disabled { | |
| 666 | + color: $color-font-disabled-primary; | |
| 667 | + background-color: $color-background-disabled-primary; | |
| 668 | + border-color: $color-stroke-default-secondary; | |
| 669 | + background-image: url(pathIcon(map-get($icons,"ico-down"), $color-icon-disabled-primary)); | |
| 670 | + } | |
| 671 | + &.border-none { | |
| 672 | + border:none; | |
| 673 | + padding-left: $spacing-2xsm; | |
| 674 | + padding-right: calc($spacing-2xsm * 2 + $size-icon-md); | |
| 675 | + background-position: right $spacing-2xsm center; | |
| 676 | + &:disabled { | |
| 677 | + background-color: transparent; | |
| 678 | + } | |
| 679 | + } | |
| 680 | +} | |
| 681 | + | |
| 682 | +.chip:has(i[class*="ico-"]) { | |
| 683 | + | |
| 684 | + [class*=ico-] { | |
| 685 | + &::before { | |
| 686 | + background-color: $color-icon-brand-primary; | |
| 687 | + } | |
| 688 | + } | |
| 689 | + input:checked ~ span [class*=ico-] { | |
| 690 | + &::before { | |
| 691 | + background-color: $color-icon-default-primary-inverse; | |
| 692 | + } | |
| 693 | + } | |
| 694 | + input:disabled ~ span [class*=ico-]{ | |
| 695 | + &::before{ | |
| 696 | + background-color: $color-icon-disabled-primary; | |
| 697 | + } | |
| 698 | + } | |
| 699 | +} | |
| 700 | + | |
| 701 | +label.chip[class*="ico-"] { | |
| 702 | + span::after, | |
| 703 | + span i { | |
| 704 | + content: ''; | |
| 705 | + flex: 0 0 auto; | |
| 706 | + @include ico-set($color-icon-brand-primary); | |
| 707 | + } | |
| 708 | + input:checked+span::after { | |
| 709 | + background-color: $color-icon-default-primary-inverse; | |
| 710 | + } | |
| 711 | + input:disabled+span::after { | |
| 712 | + background-color: $color-icon-disabled-primary; | |
| 713 | + } | |
| 714 | + @each $cls, $icon in $icons { | |
| 715 | + &.#{$cls} { | |
| 716 | + span::after { | |
| 717 | + mask-image: url(pathIcon(map-get($icons,#{$cls}))); | |
| 718 | + } | |
| 719 | + | |
| 720 | + } | |
| 721 | + } | |
| 722 | +} | |
| 723 | + | |
| 724 | + | |
| 725 | +/* form box*/ | |
| 726 | +.flex-box { | |
| 727 | + display: flex; | |
| 728 | + flex-wrap: wrap; | |
| 729 | + align-items: center; | |
| 730 | + gap: $spacing-xsm; | |
| 731 | +} | |
| 732 | +.flex-box.col2 { | |
| 733 | + gap: $spacing-xsm 0; | |
| 734 | + .checkradio { | |
| 735 | + flex-basis: 50%; | |
| 736 | + margin-right: 0; | |
| 737 | + } | |
| 738 | +} | |
| 739 | +.date-box { | |
| 740 | + display:flex; | |
| 741 | + align-content: center; | |
| 742 | + gap: $spacing-xsm; | |
| 743 | + overflow: hidden; | |
| 744 | + input { | |
| 745 | + flex:1; | |
| 746 | + min-width:0; | |
| 747 | + } | |
| 748 | + span { | |
| 749 | + margin: auto 0; | |
| 750 | + } | |
| 751 | +} | |
| 752 | +.input-box { | |
| 753 | + display:inline-flex; | |
| 754 | + align-items: center; | |
| 755 | + border:$stroke-primary; | |
| 756 | + padding-right:$spacing-md; | |
| 757 | + border-radius: $radius-sm; | |
| 758 | + background-color: $color-background-default-primary; | |
| 759 | + input[type=text], | |
| 760 | + input[type=search], | |
| 761 | + input[type=password], | |
| 762 | + input[type=number], | |
| 763 | + input[type=email], | |
| 764 | + input[type=tel], | |
| 765 | + input[type=time], | |
| 766 | + input[type=date], | |
| 767 | + textarea { | |
| 768 | + border:none; | |
| 769 | + min-width: 0; | |
| 770 | + &:hover, | |
| 771 | + &:focus{ | |
| 772 | + border:none; | |
| 773 | + box-shadow: none; | |
| 774 | + } | |
| 775 | + } | |
| 776 | + &:focus-within { | |
| 777 | + border-color: $color-transparent; | |
| 778 | + outline: .2rem solid $color-stroke-brand-primary; | |
| 779 | + outline-offset: .1rem; | |
| 780 | + } | |
| 781 | + input[type=number] { | |
| 782 | + padding-left:$spacing-xsm; | |
| 783 | + padding-right:$spacing-xsm; | |
| 784 | + } | |
| 785 | +} | |
| 786 | +.input-num-area, | |
| 787 | +.input-mum-area { | |
| 788 | + display: flex; | |
| 789 | + align-items: center; | |
| 790 | + gap: $spacing-xsm; | |
| 791 | + .input-num { | |
| 792 | + width: 8rem; | |
| 793 | + min-width: 0; | |
| 794 | + text-align: center; | |
| 795 | + &.is-error { | |
| 796 | + border-color: $color-stroke-danger-primary; | |
| 797 | + background-color: $color-background-danger-primary; | |
| 798 | + } | |
| 799 | + } | |
| 800 | +} | |
| 801 | +.input-phone-area { | |
| 802 | + display: flex; | |
| 803 | + gap:$spacing-2xsm $spacing-xsm; | |
| 804 | + flex-wrap: wrap; | |
| 805 | + .phone { | |
| 806 | + display: flex; | |
| 807 | + gap:$spacing-2xsm; | |
| 808 | + align-items: center; | |
| 809 | + max-width: 280px; | |
| 810 | + span { | |
| 811 | + flex:none; | |
| 812 | + } | |
| 813 | + input[type=number], | |
| 814 | + input[type=text] { | |
| 815 | + flex:1; | |
| 816 | + min-width: 0; | |
| 817 | + } | |
| 818 | + } | |
| 819 | + .fnc { | |
| 820 | + display: flex; | |
| 821 | + gap:$spacing-2xsm; | |
| 822 | + align-items: center; | |
| 823 | + } | |
| 824 | +} | |
| 825 | +// checkradio | |
| 826 | +.checkradio { | |
| 827 | + display: inline-flex; | |
| 828 | + margin-right: $spacing-lg; | |
| 829 | + flex-wrap: wrap; | |
| 830 | + gap:$spacing-2xsm 0; | |
| 831 | + label { | |
| 832 | + align-items: flex-start; | |
| 833 | + cursor: pointer; | |
| 834 | + &::before, | |
| 835 | + &::after { | |
| 836 | + flex:none; | |
| 837 | + } | |
| 838 | + } | |
| 839 | + &:only-child { | |
| 840 | + margin-right:0; | |
| 841 | + } | |
| 842 | +} | |
| 843 | +.checkradio-option { | |
| 844 | + position: relative; | |
| 845 | + display: none; | |
| 846 | + gap:$spacing-2xsm; | |
| 847 | + align-items: center; | |
| 848 | + flex-wrap: wrap; | |
| 849 | + // pointer-events: none; | |
| 850 | + &.block { | |
| 851 | + display: none; | |
| 852 | + } | |
| 853 | + // &::before { | |
| 854 | + // content: ""; | |
| 855 | + // position: absolute; | |
| 856 | + // inset: 0; | |
| 857 | + // background-color: transparent; | |
| 858 | + // } | |
| 859 | +} | |
| 860 | +.checkradio input:checked ~ .checkradio-option, | |
| 861 | +.checkradio:has(input:checked) + .checkradio-option { | |
| 862 | + display: inline-flex; | |
| 863 | + &.block { | |
| 864 | + display: block; | |
| 865 | + } | |
| 866 | + // &::before { | |
| 867 | + // display: none; | |
| 868 | + // } | |
| 869 | +} | |
| 870 | +.checkradio-area { | |
| 871 | + display: flex; | |
| 872 | + flex-wrap: wrap; | |
| 873 | + gap:8px 20px; | |
| 874 | + &.col6 { | |
| 875 | + .checkradio { | |
| 876 | + flex-basis: calc(100% / 6 - 20px); | |
| 877 | + } | |
| 878 | + } | |
| 879 | + .checkradio { | |
| 880 | + margin:0; | |
| 881 | + } | |
| 882 | +} | |
| 883 | +.checkradio-custom-area { | |
| 884 | + font-size: 0; | |
| 885 | + display: flex; | |
| 886 | + flex-wrap: wrap; | |
| 887 | + gap: $spacing-2xsm; | |
| 888 | + .checkradio { | |
| 889 | + margin:0; | |
| 890 | + input[type="checkbox"], | |
| 891 | + input[type="radio"] { | |
| 892 | + & ~ label { | |
| 893 | + display: inline-flex; | |
| 894 | + align-items: center; | |
| 895 | + justify-content: center; | |
| 896 | + font-size: $size-font-sm; | |
| 897 | + font-weight: $size-font-weight-lg; | |
| 898 | + border: $stroke-primary; | |
| 899 | + color: $color-font-default-primary; | |
| 900 | + height: $form-height-md; | |
| 901 | + min-width: 8rem; | |
| 902 | + padding:0 1.6rem; | |
| 903 | + border-radius: $radius-sm; | |
| 904 | + box-sizing: border-box; | |
| 905 | + background-color: #fff; | |
| 906 | + margin-right:0; | |
| 907 | + cursor: pointer; | |
| 908 | + gap: $spacing-2xsm; | |
| 909 | + align-items: center; | |
| 910 | + &::before, | |
| 911 | + &::after { | |
| 912 | + display: none; | |
| 913 | + } | |
| 914 | + } | |
| 915 | + &:checked { | |
| 916 | + & ~ label { | |
| 917 | + color: $color-font-brand-primary-base; | |
| 918 | + border-color: $color-stroke-brand-primary; | |
| 919 | + font-weight: $size-font-weight-xlg; | |
| 920 | + border-width: .2rem; | |
| 921 | + letter-spacing: -0.035em; | |
| 922 | + margin: 0; | |
| 923 | + } | |
| 924 | + } | |
| 925 | + &:disabled { | |
| 926 | + & ~ label { | |
| 927 | + cursor: default; | |
| 928 | + color:$color-font-disabled-primary; | |
| 929 | + background-color: $color-background-disabled-primary; | |
| 930 | + } | |
| 931 | + } | |
| 932 | + } | |
| 933 | + &.sm { | |
| 934 | + input[type="checkbox"], | |
| 935 | + input[type="radio"] { | |
| 936 | + & ~ label { | |
| 937 | + height: $form-height-sm; | |
| 938 | + min-width: 4.8rem; | |
| 939 | + padding:0 .8rem; | |
| 940 | + font-size:$size-font-xsm; | |
| 941 | + border-radius: $radius-xsm; | |
| 942 | + } | |
| 943 | + } | |
| 944 | + } | |
| 945 | + &.round { | |
| 946 | + input[type="checkbox"], | |
| 947 | + input[type="radio"] { | |
| 948 | + & ~ label { | |
| 949 | + border-radius: 2em; | |
| 950 | + font-weight: 400 !important; | |
| 951 | + } | |
| 952 | + &:checked { | |
| 953 | + & ~ label { | |
| 954 | + font-weight: $size-font-weight-md; | |
| 955 | + } | |
| 956 | + } | |
| 957 | + } | |
| 958 | + } | |
| 959 | + &.min-width { | |
| 960 | + input[type="checkbox"], | |
| 961 | + input[type="radio"] { | |
| 962 | + & ~ label { | |
| 963 | + min-width: 16rem; | |
| 964 | + } | |
| 965 | + } | |
| 966 | + } | |
| 967 | + &.spot, | |
| 968 | + &.primary { | |
| 969 | + input[type="checkbox"], | |
| 970 | + input[type="radio"] { | |
| 971 | + &:checked { | |
| 972 | + & ~ label { | |
| 973 | + border-width: .1rem; | |
| 974 | + color: $color-white; | |
| 975 | + background-color: $color-background-brand-primary-inverse; | |
| 976 | + border-color: $color-stroke-brand-primary; | |
| 977 | + .ico-check { | |
| 978 | + &::before { | |
| 979 | + background-color: $color-icon-brand-primary-inverse; | |
| 980 | + } | |
| 981 | + } | |
| 982 | + } | |
| 983 | + } | |
| 984 | + } | |
| 985 | + } | |
| 986 | + } | |
| 987 | +} | |
| 988 | + | |
| 989 | +.checkradio-custom-box-area { | |
| 990 | + font-size: 0; | |
| 991 | + display: flex; | |
| 992 | + flex-wrap: wrap; | |
| 993 | + gap: $spacing-2xsm; | |
| 994 | + .checkradio { | |
| 995 | + margin:0; | |
| 996 | + input[type="checkbox"], | |
| 997 | + input[type="radio"] { | |
| 998 | + & ~ label { | |
| 999 | + display: inline-flex; | |
| 1000 | + align-items: center; | |
| 1001 | + justify-content: center; | |
| 1002 | + font-size: $size-font-sm; | |
| 1003 | + font-weight: $size-font-weight-lg; | |
| 1004 | + border: $stroke-primary; | |
| 1005 | + color: $color-font-default-primary; | |
| 1006 | + height: $form-height-md; | |
| 1007 | + min-width: 8rem; | |
| 1008 | + padding:0 1.6rem; | |
| 1009 | + border-radius: $radius-sm; | |
| 1010 | + box-sizing: border-box; | |
| 1011 | + background-color: #fff; | |
| 1012 | + margin-right:0; | |
| 1013 | + cursor: pointer; | |
| 1014 | + gap: $spacing-2xsm; | |
| 1015 | + &::before, | |
| 1016 | + &::after { | |
| 1017 | + display: none; | |
| 1018 | + } | |
| 1019 | + } | |
| 1020 | + &:checked { | |
| 1021 | + & ~ label { | |
| 1022 | + color: $color-font-brand-primary-base; | |
| 1023 | + border-color: $color-stroke-brand-primary; | |
| 1024 | + font-weight: $size-font-weight-xlg; | |
| 1025 | + border-width: .2rem; | |
| 1026 | + letter-spacing: -0.035em; | |
| 1027 | + margin: 0; | |
| 1028 | + } | |
| 1029 | + } | |
| 1030 | + &:disabled { | |
| 1031 | + & ~ label { | |
| 1032 | + cursor: default; | |
| 1033 | + color:$color-font-disabled-primary; | |
| 1034 | + background-color: $color-background-disabled-primary; | |
| 1035 | + } | |
| 1036 | + } | |
| 1037 | + } | |
| 1038 | + &.sm { | |
| 1039 | + input[type="checkbox"], | |
| 1040 | + input[type="radio"] { | |
| 1041 | + & ~ label { | |
| 1042 | + height: $form-height-sm; | |
| 1043 | + min-width: 4.8rem; | |
| 1044 | + padding:0 .8rem; | |
| 1045 | + font-size:$size-font-xsm; | |
| 1046 | + border-radius: $radius-xsm; | |
| 1047 | + } | |
| 1048 | + } | |
| 1049 | + } | |
| 1050 | + &.round { | |
| 1051 | + input[type="checkbox"], | |
| 1052 | + input[type="radio"] { | |
| 1053 | + & ~ label { | |
| 1054 | + border-radius: 2em; | |
| 1055 | + font-weight: 400 !important; | |
| 1056 | + } | |
| 1057 | + &:checked { | |
| 1058 | + & ~ label { | |
| 1059 | + font-weight: $size-font-weight-md; | |
| 1060 | + } | |
| 1061 | + } | |
| 1062 | + } | |
| 1063 | + } | |
| 1064 | + &.min-width { | |
| 1065 | + input[type="checkbox"], | |
| 1066 | + input[type="radio"] { | |
| 1067 | + & ~ label { | |
| 1068 | + min-width: 16rem; | |
| 1069 | + } | |
| 1070 | + } | |
| 1071 | + } | |
| 1072 | + &.spot, | |
| 1073 | + &.primary { | |
| 1074 | + input[type="checkbox"], | |
| 1075 | + input[type="radio"] { | |
| 1076 | + &:checked { | |
| 1077 | + & ~ label { | |
| 1078 | + border-width: .1rem; | |
| 1079 | + color: $color-white; | |
| 1080 | + background-color: $color-background-brand-primary-inverse; | |
| 1081 | + border-color: $color-stroke-brand-primary; | |
| 1082 | + .ico-check { | |
| 1083 | + background-color: $color-icon-brand-primary-inverse; | |
| 1084 | + } | |
| 1085 | + } | |
| 1086 | + } | |
| 1087 | + } | |
| 1088 | + } | |
| 1089 | + } | |
| 1090 | +} | |
| 1091 | +.checkradio-custom-block-area { | |
| 1092 | + display: flex; | |
| 1093 | + flex-direction: column; | |
| 1094 | + flex-wrap: wrap; | |
| 1095 | + gap:$spacing-xsm; | |
| 1096 | + .checkradio { | |
| 1097 | + position: relative; | |
| 1098 | + display: flex; | |
| 1099 | + width: 100%; | |
| 1100 | + margin:0; | |
| 1101 | + min-height: 4.8rem; | |
| 1102 | + padding:1.6rem; | |
| 1103 | + gap:$spacing-2xsm $spacing-md; | |
| 1104 | + box-sizing: border-box; | |
| 1105 | + background-color: $color-background-default-primary; | |
| 1106 | + border-radius: $radius-sm; | |
| 1107 | + align-items: center; | |
| 1108 | + input[type="checkbox"], | |
| 1109 | + input[type="radio"] { | |
| 1110 | + & ~ label { | |
| 1111 | + position: absolute; | |
| 1112 | + top:0; | |
| 1113 | + left:0; | |
| 1114 | + bottom:0; | |
| 1115 | + right:0; | |
| 1116 | + display:flex; | |
| 1117 | + align-items: center; | |
| 1118 | + gap:$spacing-md; | |
| 1119 | + width: 100%; | |
| 1120 | + cursor: pointer; | |
| 1121 | + border: $stroke-primary; | |
| 1122 | + border-radius: $radius-sm; | |
| 1123 | + text-indent: -99999px; | |
| 1124 | + box-sizing: border-box; | |
| 1125 | + color:$color-font-default-primary; | |
| 1126 | + &::before, | |
| 1127 | + &::after { | |
| 1128 | + display: none; | |
| 1129 | + } | |
| 1130 | + } | |
| 1131 | + &:checked { | |
| 1132 | + & ~ label { | |
| 1133 | + color: $color-black; | |
| 1134 | + border-color: $color-font-brand-primary; | |
| 1135 | + border-width: 0.1rem; | |
| 1136 | + margin: 0; | |
| 1137 | + } | |
| 1138 | + & ~ .txt-area { | |
| 1139 | + color: $color-stroke-default-primary; | |
| 1140 | + } | |
| 1141 | + } | |
| 1142 | + } | |
| 1143 | + &.black { | |
| 1144 | + input[type="checkbox"], | |
| 1145 | + input[type="radio"] { | |
| 1146 | + &:checked { | |
| 1147 | + & ~ label { | |
| 1148 | + color: $color-stroke-default-primary; | |
| 1149 | + border-color: $color-stroke-default-primary; | |
| 1150 | + margin: 0; | |
| 1151 | + } | |
| 1152 | + | |
| 1153 | + } | |
| 1154 | + } | |
| 1155 | + } | |
| 1156 | + } | |
| 1157 | + .relative-z { | |
| 1158 | + position: relative; | |
| 1159 | + z-index: 1; | |
| 1160 | + } | |
| 1161 | + .txt-area { | |
| 1162 | + // display: flex; | |
| 1163 | + font-size: $size-font-xsm; | |
| 1164 | + color:$color-font-default-tertiary; | |
| 1165 | + flex:1; | |
| 1166 | + .label-area { | |
| 1167 | + margin-bottom:$spacing-xsm; | |
| 1168 | + } | |
| 1169 | + strong { | |
| 1170 | + margin-right:$spacing-xsm; | |
| 1171 | + } | |
| 1172 | + } | |
| 1173 | + .checkradio-fnc { | |
| 1174 | + position: relative; | |
| 1175 | + z-index: 1; | |
| 1176 | + display: flex; | |
| 1177 | + align-items: center; | |
| 1178 | + gap:$spacing-xsm; | |
| 1179 | + } | |
| 1180 | +} | |
| 1181 | +.checkradio-custom-row-area { | |
| 1182 | + border-radius: $radius-sm; | |
| 1183 | + border: $stroke-secondary; | |
| 1184 | + overflow:hidden; | |
| 1185 | + display: flex; | |
| 1186 | + .checkradio { | |
| 1187 | + border-right: $stroke-secondary; | |
| 1188 | + margin:0; | |
| 1189 | + &:last-of-type { | |
| 1190 | + border-right: none; | |
| 1191 | + } | |
| 1192 | + input[type="checkbox"], | |
| 1193 | + input[type="radio"] { | |
| 1194 | + & ~ label { | |
| 1195 | + display: inline-flex; | |
| 1196 | + align-items: center; | |
| 1197 | + justify-content: center; | |
| 1198 | + font-size: $size-font-sm; | |
| 1199 | + font-weight: $size-font-weight-lg; | |
| 1200 | + color: $color-font-default-primary; | |
| 1201 | + height: $form-height-md; | |
| 1202 | + min-width: 4.8rem; | |
| 1203 | + padding:0 $spacing-xsm; | |
| 1204 | + margin-right:0; | |
| 1205 | + cursor: pointer; | |
| 1206 | + &::before, | |
| 1207 | + &::after { | |
| 1208 | + display: none; | |
| 1209 | + } | |
| 1210 | + } | |
| 1211 | + &:checked { | |
| 1212 | + & ~ label { | |
| 1213 | + background-color: $color-background-brand-secondary-inverse; | |
| 1214 | + color:$color-font-default-primary-inverse; | |
| 1215 | + i { | |
| 1216 | + &::before { | |
| 1217 | + background-color: $color-icon-default-primary-inverse; | |
| 1218 | + } | |
| 1219 | + } | |
| 1220 | + } | |
| 1221 | + } | |
| 1222 | + &:disabled { | |
| 1223 | + & ~ label { | |
| 1224 | + cursor: default; | |
| 1225 | + color:$color-font-disabled-primary; | |
| 1226 | + background-color: $color-background-disabled-primary; | |
| 1227 | + } | |
| 1228 | + } | |
| 1229 | + } | |
| 1230 | + } | |
| 1231 | +} | |
| 1232 | + | |
| 1233 | +.checkradio-custom-row-area-inverse { | |
| 1234 | + border-radius: $radius-xsm; | |
| 1235 | + overflow:hidden; | |
| 1236 | + display: flex; | |
| 1237 | + background-color: $color-background-default-tertiary-inverse; | |
| 1238 | + padding: $spacing-3xsm; | |
| 1239 | + .checkradio { | |
| 1240 | + margin:0; | |
| 1241 | + input[type="checkbox"], | |
| 1242 | + input[type="radio"] { | |
| 1243 | + & ~ label { | |
| 1244 | + display: inline-flex; | |
| 1245 | + align-items: center; | |
| 1246 | + justify-content: center; | |
| 1247 | + font-size: $size-font-xsm; | |
| 1248 | + font-weight: $size-font-weight-md; | |
| 1249 | + color: $color-font-default-quaternary-inverse; | |
| 1250 | + height: 2.4rem; | |
| 1251 | + padding:0 $spacing-2xsm; | |
| 1252 | + border-radius: $radius-xsm; | |
| 1253 | + margin-right:0; | |
| 1254 | + cursor: pointer; | |
| 1255 | + &::before, | |
| 1256 | + &::after { | |
| 1257 | + display: none; | |
| 1258 | + } | |
| 1259 | + } | |
| 1260 | + &:checked { | |
| 1261 | + & ~ label { | |
| 1262 | + background-color: $color-background-default-primary; | |
| 1263 | + color:$color-font-default-primary; | |
| 1264 | + } | |
| 1265 | + } | |
| 1266 | + &:disabled { | |
| 1267 | + & ~ label { | |
| 1268 | + cursor: default; | |
| 1269 | + color:$color-font-disabled-primary; | |
| 1270 | + background-color: $color-background-disabled-primary; | |
| 1271 | + } | |
| 1272 | + } | |
| 1273 | + } | |
| 1274 | + } | |
| 1275 | +} | |
| 1276 | + | |
| 1277 | +.datepicker-fnc-area { | |
| 1278 | + display: flex; | |
| 1279 | + align-items: center; | |
| 1280 | + justify-content: center; | |
| 1281 | + gap:$spacing-md; | |
| 1282 | + margin-bottom: $spacing-lg; | |
| 1283 | + input[type=date] { | |
| 1284 | + @include typo('tit-lg'); | |
| 1285 | + width: 20rem; | |
| 1286 | + padding:0; | |
| 1287 | + border:none; | |
| 1288 | + &:focus { | |
| 1289 | + box-shadow: none; | |
| 1290 | + } | |
| 1291 | + } | |
| 1292 | + > * { | |
| 1293 | + margin-bottom: 0; | |
| 1294 | + } | |
| 1295 | + .title { | |
| 1296 | + margin-bottom: 0; | |
| 1297 | + } | |
| 1298 | +} | |
| 1299 | + | |
| 1300 | +@include responsive(mobile) { | |
| 1301 | + | |
| 1302 | + //반응형 true | |
| 1303 | + [data-responsive="true"] { | |
| 1304 | + .input-date-area { | |
| 1305 | + display: flex; | |
| 1306 | + gap: $spacing-2xsm; | |
| 1307 | + flex-wrap: wrap; | |
| 1308 | + align-items: center; | |
| 1309 | + input[type=date] { | |
| 1310 | + min-width: 0; | |
| 1311 | + flex: 1; | |
| 1312 | + } | |
| 1313 | + } | |
| 1314 | + } | |
| 1315 | +} | |
| 1316 | + | |
| 1317 | +@include responsive(mobileSm) { | |
| 1318 | + //반응형 true | |
| 1319 | + [data-responsive="true"] { | |
| 1320 | + .input-phone-area { | |
| 1321 | + flex-direction: column; | |
| 1322 | + .phone { | |
| 1323 | + max-width: none; | |
| 1324 | + width: 100%; | |
| 1325 | + } | |
| 1326 | + .fnc { | |
| 1327 | + > * { | |
| 1328 | + flex:1; | |
| 1329 | + } | |
| 1330 | + } | |
| 1331 | + } | |
| 1332 | + | |
| 1333 | + .input-date-area { | |
| 1334 | + display: flex; | |
| 1335 | + input[type=date] { | |
| 1336 | + min-width: 0; | |
| 1337 | + flex:1; | |
| 1338 | + align-items: center; | |
| 1339 | + gap:$spacing-xsm; | |
| 1340 | + } | |
| 1341 | + } | |
| 1342 | + } | |
| 1343 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/component/_icon.scss
... | ... | @@ -0,0 +1,387 @@ |
| 1 | +$icons : ( | |
| 2 | + "ico-search" : "%3Cpath d='M21.7,20.3l-5.4-5.4c1.1-1.4,1.7-3.1,1.7-4.9c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.8,0,3.5-0.6,4.9-1.7 l5.4,5.4L21.7,20.3z M10,16c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S13.3,16,10,16z'/%3E", | |
| 3 | + "ico-form-check" : "%3Cpath d='M10.405,16.974c-.302,0-.605-.112-.839-.338l-4.622-4.65c-.481-.464-.495-1.229-.032-1.71s1.229-.495,1.709-.032l3.783,3.842,6.976-6.722c.48-.463,1.246-.449,1.709.032.463.48.449,1.246-.032,1.71l-7.814,7.53c-.234.226-.537.338-.839.338h0Z'/%3E", | |
| 4 | + "ico-form-minus" : "%3Cpath class='cls-2' d='m17.8,10.8H6.2c-.663,0-1.2.537-1.2,1.2s.537,1.2,1.2,1.2h11.6c.663,0,1.2-.537,1.2-1.2s-.537-1.2-1.2-1.2Z'/%3E", | |
| 5 | + "ico-form-plus" : "%3Cpath class='cls-2' d='m17.8,10.8h-4.6v-4.6c0-.663-.538-1.2-1.2-1.2s-1.2.537-1.2,1.2v4.6h-4.6c-.663,0-1.2.537-1.2,1.2s.538,1.2,1.2,1.2h4.6v4.6c0,.663.538,1.2,1.2,1.2s1.2-.537,1.2-1.2v-4.6h4.6c.663,0,1.2-.537,1.2-1.2s-.538-1.2-1.2-1.2Z'/%3E", | |
| 6 | + "ico-form-up" : "%3Cpath class='cls-1' d='m17.357,15.707l-5.293-5.293-5.293,5.293-1.414-1.414,6-6c.391-.391,1.023-.391,1.414,0l6,6-1.414,1.414Z'/%3E", | |
| 7 | + "ico-form-down" : "%3Cpath class='cls-1' d='m12.065,16c-.256,0-.512-.098-.707-.293l-6-6,1.414-1.414,5.293,5.293,5.293-5.293,1.414,1.414-6,6c-.195.195-.451.293-.707.293Z'/%3E", | |
| 8 | + "ico-ppv" : "%3Cpath class='cls-1' d='m12.312,20.658l-7-8c-.329-.377-.329-.939,0-1.316L12.312,3.342l1.506,1.316-6.424,7.342,6.424,7.342-1.506,1.316Z'/%3E%3Cpath class='cls-1' d='m17.312,20.658l-7-8c-.329-.377-.329-.939,0-1.316l7-8,1.506,1.316-6.424,7.342,6.424,7.342-1.506,1.316Z'/%3E", | |
| 9 | + "ico-pv" : "%3Cpath class='cls-1' d='m14.357,20.707L6.357,12.707c-.391-.391-.391-1.023,0-1.414L14.357,3.293l1.414,1.414-7.293,7.293,7.293,7.293-1.414,1.414Z'/%3E", | |
| 10 | + "ico-fw" : "%3Cpath class='cls-1' d='m9.772,20.707l-1.414-1.414,7.293-7.293-7.293-7.293,1.414-1.414,8,8c.391.391.391,1.023,0,1.414l-8,8Z'/%3E", | |
| 11 | + "ico-ffw" : "%3Cpath class='cls-1' d='m11.817,20.658l-1.506-1.316,6.424-7.342-6.424-7.342,1.506-1.316,7,8c.329.377.329.939,0,1.316l-7,8Z'/%3E%3Cpath class='cls-1' d='m6.817,20.658l-1.506-1.316,6.424-7.342-6.424-7.342,1.506-1.316,7,8c.329.377.329.939,0,1.316l-7,8Z'/%3E", | |
| 12 | + "ico-up" : "%3Cpath d='m11.29,6.29L2.29,15.29l1.41,1.41,8.29-8.29,8.29,8.29,1.41-1.41L12.71,6.29c-.39-.39-1.02-.39-1.41,0Z'/%3E", | |
| 13 | + "ico-down" : "%3Cpath d='m3.71,7.29l-1.41,1.41,9,9c.19.19.44.29.71.29s.52-.11.71-.29l9-9-1.41-1.41-8.29,8.29L3.71,7.29Z'/%3E", | |
| 14 | + "ico-lt" : "%3Cpath d='m15.29,2.29L6.29,11.29c-.39.39-.39,1.02,0,1.41l9,9,1.41-1.41-8.29-8.29L16.71,3.71l-1.41-1.41Z'/%3E", | |
| 15 | + "ico-gt" : "%3Cpath d='m8.71,21.71l9-9c.39-.39.39-1.02,0-1.41L8.71,2.29l-1.41,1.41,8.29,8.29-8.29,8.29,1.41,1.41Z'/%3E", | |
| 16 | + "ico-arrow-left" : "%3Cpath d='m10.6,4l-7.31,7.29c-.19.19-.29.44-.29.71s.11.52.29.71l7.31,7.29,1.41-1.42-5.6-5.58h14.58v-2H6.41s5.6-5.58,5.6-5.58l-1.41-1.42Z'/%3E", | |
| 17 | + "ico-arrow-right" : "%3Cpath d='m14.39,4l-1.41,1.42,5.6,5.59H3.99s0,2,0,2h14.58s-5.6,5.58-5.6,5.58l1.41,1.42,7.31-7.29c.19-.19.29-.44.29-.71s-.11-.52-.29-.71l-7.31-7.29Z'/%3E", | |
| 18 | + "ico-arrow-up" : "%3Cpath d='m13,21V6.42s5.58,5.6,5.58,5.6l1.42-1.41-7.29-7.31c-.38-.38-1.04-.38-1.42,0l-7.29,7.31,1.42,1.41,5.59-5.6v14.59s2,0,2,0Z'/%3E", | |
| 19 | + "ico-arrow-down" : "%3Cpath d='m4,13.4l7.29,7.31c.19.19.44.29.71.29s.52-.11.71-.29l7.29-7.31-1.42-1.41-5.58,5.6V3h-2v14.59s-5.58-5.6-5.58-5.6l-1.42,1.41Z'/%3E", | |
| 20 | + "ico-play" : "%3Cpath d='m5,2v20l16-10L5,2Zm2,3.61l10.23,6.39-10.23,6.39V5.61Z'/%3E", | |
| 21 | + "ico-pause" : "%3Crect class='cls-2' x='14' y='2' width='5' height='20'/%3E%3Crect class='cls-2' x='5' y='2' width='5' height='20'/%3E", | |
| 22 | + "ico-stop" : "%3Cpath d='m3,21h18V3H3v18ZM5,5h14v14H5V5Z'/%3E", | |
| 23 | + "ico-archive" : "%3Cpath d='m12,18c.26,0,.51-.1.71-.29l3-3-1.41-1.41-1.29,1.29v-4.59h-2v4.59l-1.29-1.29-1.41,1.41,3,3c.2.2.45.29.71.29Z'/%3E%3Cpath d='m5,2l-2,4v16h18V6l-2-4H5Zm1.24,2h11.53l1,2H5.24l1-2Zm12.76,16H5v-12h14v12Z'/%3E", | |
| 24 | + "ico-attach" : "%3Cpath d='m9,9v6c0,1.65,1.35,3,3,3s3-1.35,3-3V5c0-2.48-2.02-4.5-4.5-4.5s-4.5,2.02-4.5,4.5v12c0,3.31,2.69,6,6,6s6-2.69,6-6V7h-2v10c0,2.21-1.79,4-4,4s-4-1.79-4-4V5c0-1.38,1.12-2.5,2.5-2.5s2.5,1.12,2.5,2.5v10c0,.55-.45,1-1,1s-1-.45-1-1v-6h-2Z'/%3E", | |
| 25 | + "ico-block" : "%3Cpath d='m12,2C6.48,2,2,6.48,2,12s4.48,10,10,10,10-4.48,10-10S17.52,2,12,2ZM4,12c0-4.41,3.59-8,8-8,1.85,0,3.54.63,4.9,1.69l-11.21,11.21c-1.05-1.36-1.69-3.05-1.69-4.9Zm8,8c-1.85,0-3.54-.63-4.9-1.69l11.21-11.21c1.05,1.36,1.69,3.05,1.69,4.9,0,4.41-3.59,8-8,8Z'/%3E", | |
| 26 | + "ico-book" : "%3Cpath class='cls-2' d='m12.997,21l-1.997-.021c-.089-.261-1.304-1-3.5-1s-3.411.739-3.503,1.021l-1.997-.021V5.979c0-3.208,7.283-3.853,10-1.8,2.717-2.054,10-1.408,10,1.8v15h-2c-.089-.261-1.304-1-3.5-1s-3.411.739-3.503,1.021ZM7.5,4.979c-2.196,0-3.411.739-3.503,1.021l.003,12.616c1.99-.844,5.008-.844,7,0V5.979c-.089-.261-1.304-1-3.5-1Zm9,13c1.249,0,2.504.215,3.5.637V5.979c-.089-.261-1.304-1-3.5-1-2.179,0-3.391.728-3.5,1.014v12.623c.996-.422,2.251-.637,3.5-.637Z'/%3E", | |
| 27 | + "ico-bookmark" : "%3Cpath d='m19,2H5v20l7-4,7,4V2Zm-2,16.55l-4.01-2.29c-.31-.18-.65-.26-.99-.26s-.68.09-.99.26l-4.01,2.29V4h10v14.55Z'/%3E", | |
| 28 | + "ico-calendar" : "%3Cpath d='m7,2v2H3v18h18V4h-4v-2h-2v2h-6v-2h-2Zm-2,18v-10h14v10H5Zm14-12H5v-2h14v2Z'/%3E%3Ccircle cx='8' cy='13' r='1'/%3E%3Ccircle cx='12' cy='13' r='1'/%3E%3Ccircle cx='16' cy='13' r='1'/%3E%3Ccircle cx='8' cy='17' r='1'/%3E%3Ccircle cx='12' cy='17' r='1'/%3E%3Ccircle cx='16' cy='17' r='1'/%3E", | |
| 29 | + "ico-call" : "%3Cpath d='m6.64,2.7c-.19-.19-.45-.29-.7-.29s-.51.1-.71.29l-1.76,1.76c-1.96,1.96-1.96,5.13,0,7.09l8.97,8.97c.98.98,2.26,1.47,3.55,1.47s2.56-.49,3.54-1.47l1.77-1.76c.39-.39.39-1.02,0-1.41l-5.3-5.36-2,2-4-4,2-2L6.64,2.7Zm5.95,12.71c.39.39.9.59,1.41.59s1.02-.2,1.41-.59l.58-.58,3.19,3.22-1.06,1.06c-.57.57-1.33.88-2.13.88s-1.56-.31-2.13-.88L4.88,10.14c-1.18-1.18-1.17-3.09,0-4.27l1.05-1.05,3.23,3.19-.58.58c-.38.38-.59.88-.59,1.41,0,.53.21,1.04.59,1.41l4,4Z'/%3E", | |
| 30 | + "ico-camera" : "%3Cpath d='m2,21h20V6h-4l-1.5-2H7.5l-1.5,2H2v15Zm2-13h2c.63,0,1.22-.3,1.6-.8l.9-1.2h7l.9,1.2c.38.5.97.8,1.6.8h2v11H4v-11Z'/%3E%3Cpath d='m12,9c-2.21,0-4,1.79-4,4s1.79,4,4,4,4-1.79,4-4-1.79-4-4-4Zm0,6c-1.1,0-2-.9-2-2s.9-2,2-2,2,.9,2,2-.9,2-2,2Z'/%3E", | |
| 31 | + "ico-chart" : "%3Cpath class='cls-2' d='M6,12v8h-2v-8h2M8,10H2v12h6v-12h0Z'/%3E%3Cpath class='cls-2' d='M13,8v12h-2v-12h2M15,6h-6v16h6V6h0Z'/%3E%3Cpath class='cls-2' d='M20,4v16h-2V4h2M22,2h-6v20h6V2h0Z'/%3E", | |
| 32 | + "ico-chat" : "%3Cpolygon points='6 15 6 13 4.59 13 4 13.59 4 5 16 5 16 6 18 6 18 3 2 3 2 18.41 5.41 15 6 15'/%3E%3Cpath d='m7,19h11l4,3V7H7v12Zm2-10h11v9l-.8-.6c-.35-.26-.77-.4-1.2-.4h-9v-8Z'/%3E", | |
| 33 | + "ico-check" : "%3Cpath d='m9.87,17.56l-7.21-6.31-1.32,1.51,8,7c.18.16.42.25.66.25.03,0,.06,0,.09,0,.27-.02.52-.16.69-.37l12-15-1.56-1.25-11.35,14.18Z'/%3E", | |
| 34 | + "ico-close" : "%3Cpolygon points='19.59 3 12 10.59 4.41 3 3 4.41 10.59 12 3 19.59 4.41 21 12 13.41 19.59 21 21 19.59 13.41 12 21 4.41 19.59 3'/%3E", | |
| 35 | + "ico-comment" : "%3Cpath d='m2,19h14l6,4V4H2v15Zm2-13h16v13.26l-2.89-1.93c-.33-.22-.71-.34-1.11-.34H4V6Z'/%3E%3Crect x='6' y='8' width='12' height='2'/%3E%3Crect x='6' y='12' width='10' height='2'/%3E", | |
| 36 | + "ico-copy" : "%3Cpath d='m8,18h12V2h-12v16Zm2-14h8v12h-8V4Z'/%3E%3Cpolygon points='4 22 5 22 6 22 17 22 17 20 6 20 6 5 4 5 4 22'/%3E", | |
| 37 | + "ico-delete" : "%3Crect x='6' y='2' width='12' height='2'/%3E%3Crect x='9' y='9' width='2' height='9'/%3E%3Crect x='13' y='9' width='2' height='9'/%3E%3Cpath d='m19,22V7h1v-2H4v2h1v15h14Zm-2-15v13H7V7h10Z'/%3E", | |
| 38 | + "ico-document" : "%3Cpath class='cls-2' d='m14,2H4v20h16v-14l-6-6Zm3.172,6h-3.172v-3.172l3.172,3.172Zm.828,12H6V4h6v6h6v10Z'/%3E%3Crect class='cls-2' x='8' y='16' width='6' height='2'/%3E%3Crect class='cls-2' x='8' y='12' width='8' height='2'/%3E", | |
| 39 | + "ico-document-plus" : "%3Cpolygon class='cls-2' points='18 20 6 20 6 4 12 4 12 2 4 2 4 22 20 22 20 12 18 12 18 20'/%3E%3Crect class='cls-2' x='8' y='16' width='6' height='2'/%3E%3Crect class='cls-2' x='8' y='12' width='8' height='2'/%3E%3Cpolygon class='cls-2' points='22 5 19 5 19 2 17 2 17 5 14 5 14 7 17 7 17 10 19 10 19 7 22 7 22 5'/%3E", | |
| 40 | + "ico-download" : "%3Cpath d='m11,2v11.58s-3.29-3.29-3.29-3.29l-1.41,1.41,5,5c.2.2.45.29.71.29s.51-.1.71-.29l5-5-1.41-1.41-3.29,3.29V2s-2,0-2,0Z'/%3E%3Cpath d='m20,20H4v-8h-2v9c0,.55.45,1,1,1h18c.55,0,1-.45,1-1v-9h-2v8Z'/%3E", | |
| 41 | + "ico-move" : "%3Ccircle cx='9.5' cy='12' r='1.5'/%3E%3Ccircle cx='9.5' cy='5.5' r='1.5'/%3E%3Ccircle cx='9.5' cy='18.5' r='1.5'/%3E%3Ccircle cx='14.5' cy='12' r='1.5'/%3E%3Ccircle cx='14.5' cy='5.5' r='1.5'/%3E%3Ccircle cx='14.5' cy='18.5' r='1.5'/%3E", | |
| 42 | + "ico-edit" : "%3Cpath class='cls-2' d='M21.707,6.293l-4-4c-.391-.391-1.023-.391-1.414,0L2.293,16.293c-.188.188-.293.442-.293.707v4c0,.552.448,1,1,1h4c.265,0,.52-.105.707-.293l14-14c.391-.391.391-1.023,0-1.414ZM14,7.414l2.586,2.586-6.586,6.586-2.586-2.586,6.586-6.586ZM6.586,20h-2.586v-2.586l2-2,2.586,2.586-2,2ZM18,8.586l-2.586-2.586,1.586-1.586,2.586,2.586-1.586,1.586Z'/%3E", | |
| 43 | + "ico-favorite" : "%3Cpath d='m16.71,3c-1.35,0-2.71.53-3.74,1.6l-.96.99-.96-.99c-1.03-1.06-2.39-1.6-3.74-1.6s-2.71.53-3.74,1.6c-2.07,2.13-2.07,5.58,0,7.71l8.45,8.7,8.45-8.7c2.07-2.13,2.07-5.58,0-7.71-1.03-1.06-2.39-1.6-3.74-1.6Zm2.31,7.91l-7.01,7.22-7.01-7.22c-1.32-1.36-1.32-3.56,0-4.92.62-.64,1.44-.99,2.31-.99s1.69.35,2.31.99l.96.99,1.43,1.48,1.43-1.48.96-.99c.62-.64,1.44-.99,2.31-.99s1.69.35,2.31.99c1.32,1.36,1.32,3.56,0,4.92Z'/%3E", | |
| 44 | + "ico-favorite-active" : "%3Cpath class='cls-1' d='m12,21L3.551,12.303c-2.067-2.128-2.067-5.578,0-7.707,2.068-2.128,5.419-2.128,7.487,0l.962.99.962-.99c2.068-2.128,5.419-2.128,7.487,0,2.067,2.128,2.067,5.578,0,7.707l-8.449,8.697Z'/%3E", | |
| 45 | + "ico-file" : "%3Cpath d='m20,10v-2l-6-6H4v20h16v-12Zm-6-5.17l3.17,3.17h-3.17v-3.17Zm4,15.17H6V4h6v6h6v10Z'/%3E", | |
| 46 | + "ico-filter" : "%3Cpath d='m9,22l6-2v-6l7-7V3H2v4l7,7v8ZM4,6.17v-1.17h16v1.17l-6.41,6.41c-.38.38-.59.88-.59,1.41v4.56l-2,.67v-5.23c0-.53-.21-1.04-.59-1.41l-6.41-6.41Z'/%3E", | |
| 47 | + "ico-folder" : "%3Cpath class='cls-2' d='m20.802,21H1V3h9.414l2,2h8.586v5h2.247l-2.445,11Zm-15.555-2h13.951l1.555-7H6.802l-1.555,7Zm-2.247,0h.198l2-9h13.802v-3h-7.414l-2-2H3v14Z'/%3E", | |
| 48 | + "ico-fullscreen-exit" : "%3Cpath d='m9,16.41v4.59h2v-7c0-.55-.45-1-1-1H3v2h4.59l-6.29,6.29,1.41,1.41,6.29-6.29Z'/%3E%3Cpath d='m15,7.59V3h-2v7c0,.55.45,1,1,1h7v-2h-4.59l6.29-6.29-1.41-1.41-6.29,6.29Z'/%3E", | |
| 49 | + "ico-fullscreen" : "%3Cpath d='m4,4h6v-2H3c-.55,0-1,.45-1,1v7h2v-6Z'/%3E%3Cpath d='m3,22h7v-2h-6v-6h-2v7c0,.55.45,1,1,1Z'/%3E%3Cpath d='m22,21v-7h-2v6h-6v2h7c.55,0,1-.45,1-1Z'/%3E%3Cpath d='m22,3c0-.55-.45-1-1-1h-7v2h6v6h2V3Z'/%3E", | |
| 50 | + "ico-headphone" : "%3Cpath d='m12,2C6.49,2,2,6.49,2,12v10h6v-10h-4c0-4.41,3.59-8,8-8s8,3.59,8,8h-4v10h6v-10c0-5.51-4.49-10-10-10Zm-6,12v6h-2v-6h2Zm14,6h-2v-6h2v6Z'/%3E", | |
| 51 | + "ico-help" : "%3Cpath d='m12,22.04c5.52,0,10-4.48,10-10S17.52,2.04,12,2.04,2,6.52,2,12.04s4.48,10,10,10Zm0-18c4.41,0,8,3.59,8,8s-3.59,8-8,8-8-3.59-8-8S7.59,4.04,12,4.04Z'/%3E%3Cpath d='m12.35,14.99c-.18-.1-.37-.15-.57-.15s-.4.05-.58.15c-.18.1-.32.24-.42.42s-.15.37-.15.57c0,.21.05.4.15.57.1.17.24.31.42.42.18.1.37.16.58.16s.39-.05.57-.16c.18-.1.32-.24.42-.42.1-.17.16-.36.16-.57,0-.21-.06-.4-.16-.57s-.24-.31-.42-.42Z'/%3E%3Cpath d='m10.9,9.15c.12-.18.27-.33.46-.42.19-.1.39-.14.61-.14s.43.05.61.14.33.22.43.39c.1.17.16.36.16.59,0,.2-.04.39-.13.56s-.2.32-.35.46-.34.28-.57.42c-.3.19-.54.39-.72.59-.18.2-.31.48-.41.81-.1.34-.15.78-.15,1.33v.15h1.81v-.15c0-.32.04-.58.12-.8.08-.22.2-.41.35-.57.16-.16.37-.32.64-.48.32-.19.58-.4.8-.62s.39-.48.5-.78.18-.62.18-.98c0-.55-.14-1.03-.41-1.44-.27-.41-.66-.71-1.15-.93-.49-.21-1.06-.32-1.7-.32-.6,0-1.13.11-1.61.32-.48.21-.86.53-1.15.96-.29.43-.44.95-.45,1.57h1.94c0-.25.07-.47.19-.66Z'/%3E", | |
| 52 | + "ico-history" : "%3Cpath d='m11,7v5c0,.27.11.52.29.71l4,4,1.41-1.41-3.71-3.71v-4.59h-2Z'/%3E%3Cpath d='m12,2c-2.64,0-5.12,1.02-7,2.86v-2.86h-2v5c0,.55.45,1,1,1h5v-2h-2.28c1.46-1.29,3.31-2,5.28-2,2.14,0,4.15.83,5.66,2.34s2.34,3.52,2.34,5.66-.83,4.15-2.34,5.66-3.52,2.34-5.66,2.34-4.15-.83-5.66-2.34-2.34-3.52-2.34-5.66h-2c0,2.67,1.04,5.18,2.93,7.07,1.89,1.89,4.4,2.93,7.07,2.93s5.18-1.04,7.07-2.93c1.89-1.89,2.93-4.4,2.93-7.07s-1.04-5.18-2.93-7.07c-1.89-1.89-4.4-2.93-7.07-2.93Z'/%3E", | |
| 53 | + "ico-home" : "%3Cpath d='m4,12.83v9.17h6v-6h4v6h6v-9.17l.59.59,1.41-1.41-2-2-6.59-6.59-1.41-1.41-1.41,1.41-6.59,6.59-2,2,1.41,1.41.59-.59Zm2-2l6-6,6,6v9.17h-2v-4c0-1.1-.9-2-2-2h-4c-1.1,0-2,.9-2,2v4h-2v-9.17Z'/%3E", | |
| 54 | + "ico-hourglass" : "%3Cpath d='m6,20h-2v2h16v-2h-2v-4l-3.75-4,3.75-4v-4h2v-2H4v2h2v4l3.75,4-3.75,4v4Zm2-3.21l3.21-3.42c.72-.77.72-1.97,0-2.74l-3.21-3.42v-3.21h8v3.21l-3.21,3.42c-.72.77-.72,1.97,0,2.74l3.21,3.42v3.21h-8v-3.21Z'/%3E", | |
| 55 | + "ico-img" : "%3Cpath d='m22,3H2v18h20V3Zm-2,2v11.86l-4.36-3.63c-.4-.33-.98-.3-1.35.06l-2.54,2.54-4.1-3.58c-.39-.35-.99-.33-1.37.05l-2.29,2.29V5h16Zm-6.74,12.15l1.8-1.8,4.38,3.65h-4.06l-2.11-1.85Zm-9.26.26l3.05-3.05,5.29,4.63H4v-1.59Z'/%3E%3Ccircle cx='16' cy='9' r='2'/%3E", | |
| 56 | + "ico-info" : "%3Cpath d='m12,22.04c5.52,0,10-4.48,10-10S17.52,2.04,12,2.04,2,6.52,2,12.04s4.48,10,10,10Zm0-18c4.41,0,8,3.59,8,8s-3.59,8-8,8-8-3.59-8-8S7.59,4.04,12,4.04Z'/%3E%3Ccircle cx='12' cy='8' r='1'/%3E%3Crect x='11' y='11' width='2' height='6'/%3E", | |
| 57 | + "ico-language" : "%3Cpath d='m12,22c5.52,0,10-4.48,10-10S17.52,2,12,2,2,6.48,2,12s4.48,10,10,10Zm-6.92-6h2.56c.47,1.44,1.14,2.64,1.79,3.57-1.85-.63-3.39-1.91-4.35-3.57Zm-1.08-4c0-.69.1-1.36.26-2h2.91c-.14.88-.17,1.59-.17,2,0,.7.06,1.37.16,2h-2.89c-.17-.64-.26-1.31-.26-2Zm8-7.59c1.09,1.17,1.79,2.43,2.24,3.59h-4.47c.44-1.16,1.14-2.43,2.24-3.59Zm2.8,5.59c.17.89.2,1.61.2,2,0,.71-.07,1.37-.19,2h-5.62c-.12-.63-.19-1.29-.19-2,0-.39.03-1.11.2-2h5.6Zm5.2,2c0,.69-.1,1.36-.26,2h-2.89c.1-.63.16-1.3.16-2,0-.41-.03-1.12-.17-2h2.91c.17.64.26,1.31.26,2Zm-8,7.59c-.68-.75-1.6-1.96-2.24-3.59h4.48c-.64,1.63-1.56,2.84-2.24,3.59Zm2.56-.02c.66-.94,1.32-2.13,1.79-3.57h2.56c-.96,1.66-2.51,2.94-4.35,3.57Zm4.35-11.57h-2.57c-.36-1.12-.91-2.35-1.75-3.56,1.83.63,3.36,1.91,4.32,3.56Zm-9.51-3.56c-.84,1.21-1.39,2.44-1.75,3.56h-2.57c.96-1.65,2.49-2.93,4.32-3.56Z'/%3E", | |
| 58 | + "ico-layer" : "%3Cpath class='cls-1' d='m22,12c0-.363-.197-.698-.515-.874l-2.027-1.126,2.027-1.126c.317-.176.515-.511.515-.874s-.197-.698-.515-.874L12.485,2.126c-.301-.168-.67-.168-.971,0L2.515,7.126c-.317.176-.515.511-.515.874s.197.698.515.874l2.027,1.126-2.027,1.126c-.317.176-.515.511-.515.874s.197.698.515.874l2.027,1.126-2.027,1.126c-.317.176-.515.511-.515.874s.197.698.515.874l9,5c.15.084.318.126.485.126s.335-.042.485-.126l9-5c.317-.176.515-.511.515-.874s-.197-.698-.515-.874l-2.027-1.126,2.027-1.126c.317-.176.515-.511.515-.874Zm-10-7.856l6.94,3.856-6.94,3.856-6.94-3.856,6.94-3.856Zm-.485,9.73c.15.084.318.126.485.126s.335-.042.485-.126l4.915-2.73,1.541.856-6.941,3.856-6.941-3.856,1.541-.856,4.915,2.73Zm7.427,2.126l-6.941,3.856-6.941-3.856,1.541-.856,4.915,2.73c.15.084.318.126.485.126s.335-.042.485-.126l4.915-2.73,1.541.856Z'/%3E", | |
| 59 | + "ico-link" : "%3Cpath d='m2,12c0,2.76,2.24,5,5,5h4v-2h-4c-1.65,0-3-1.35-3-3s1.35-3,3-3h4v-2h-4c-2.76,0-5,2.24-5,5Z'/%3E%3Cpath d='m17,7h-4v2h4c1.65,0,3,1.35,3,3s-1.35,3-3,3h-4v2h4c2.76,0,5-2.24,5-5s-2.24-5-5-5Z'/%3E%3Crect x='8' y='11' width='8' height='2'/%3E", | |
| 60 | + "ico-location" : "%3Cpath d='m12,2c-3.02,0-5.68,1.7-6.99,4-1,1.74-1,3.42-1,4,.03,3.14,1.86,5.39,3.99,8,.88,1.08,2.19,2.51,4,4,1.81-1.49,3.12-2.92,4-4,2.13-2.61,3.97-4.86,3.99-8,0-.58,0-2.26-1-4-1.32-2.3-3.98-4-6.99-4Zm5.99,7.98c-.02,2.44-1.58,4.34-3.54,6.75-.75.92-1.57,1.79-2.45,2.61-.88-.82-1.7-1.69-2.45-2.61-1.97-2.41-3.52-4.31-3.54-6.75,0-.42-.01-1.68.73-2.99,1.04-1.82,3.11-2.99,5.26-2.99s4.22,1.18,5.26,2.99c.75,1.31.74,2.57.73,2.99Z'/%3E%3Cpath d='m12,7c-1.66,0-3,1.34-3,3s1.34,3,3,3,3-1.34,3-3-1.34-3-3-3Zm0,4c-.55,0-1-.45-1-1s.45-1,1-1,1,.45,1,1-.45,1-1,1Z'/%3E", | |
| 61 | + "ico-lock" : "%3Cpath d='m20,10h-3v-3c0-2.76-2.24-5-5-5s-5,2.24-5,5v3h-3v12h16v-12Zm-11-3c0-1.65,1.35-3,3-3s3,1.35,3,3v3h-6v-3Zm9,13H6v-8h12v8Z'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E", | |
| 62 | + "ico-login" : "%3Cpath d='m21,2h-9v2h8v16h-8v2h9c.55,0,1-.45,1-1V3c0-.55-.45-1-1-1Z'/%3E%3Cpath d='m8.29,16.29l1.41,1.41,5-5c.39-.39.39-1.02,0-1.41l-5-5-1.41,1.41,3.29,3.29H2s0,2,0,2h9.58s-3.29,3.29-3.29,3.29Z'/%3E", | |
| 63 | + "ico-logout" : "%3Cpath d='m3,22h9v-2H4V4h8v-2H3c-.55,0-1,.45-1,1v18c0,.55.45,1,1,1Z'/%3E%3Cpath d='m16.71,6.29l-1.41,1.41,3.29,3.29h-9.59s0,2,0,2h9.58s-3.29,3.29-3.29,3.29l1.41,1.41,5-5c.39-.39.39-1.02,0-1.41l-5-5Z'/%3E", | |
| 64 | + "ico-mail" : "%3Cpath d='m2,9v11h20V4H2v5Zm2-3h16v1.87l-8,4.8L4,7.87v-1.87Zm0,4.2l8,4.8,8-4.8v7.8H4v-7.8Z'/%3E", | |
| 65 | + "ico-map" : "%3Cpath d='m15,20l7-2V4l-7,2-6-2-7,2v14l7-2,6,2Zm1-12.21l4-1.14v9.84l-4,1.14V7.79Zm-6-1.35l4,1.33v9.78l-4-1.33V6.44Zm-2,9.76l-4,1.14V7.51l4-1.14v9.84Z'/%3E", | |
| 66 | + "ico-menu" : "%3Crect x='3' y='11' width='18' height='2'/%3E%3Crect x='3' y='5' width='18' height='2'/%3E%3Crect x='3' y='17' width='18' height='2'/%3E", | |
| 67 | + "ico-mic" : "%3Cpath d='m11,19.93v2.07h2v-2.07c3.94-.49,7-3.86,7-7.93h-2c0,3.31-2.69,6-6,6s-6-2.69-6-6h-2c0,4.07,3.06,7.44,7,7.93Z'/%3E%3Cpath d='m8,6v6c0,2.21,1.79,4,4,4s4-1.79,4-4v-6c0-2.21-1.79-4-4-4s-4,1.79-4,4Zm6,0v6c0,1.1-.9,2-2,2s-2-.9-2-2v-6c0-1.1.9-2,2-2s2,.9,2,2Z'/%3E", | |
| 68 | + "ico-more-horiz" : "%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Ccircle cx='18.5' cy='12' r='1.5'/%3E%3Ccircle cx='5.5' cy='12' r='1.5'/%3E", | |
| 69 | + "ico-more-vert" : "%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Ccircle cx='12' cy='18.5' r='1.5'/%3E%3Ccircle cx='12' cy='5.5' r='1.5'/%3E", | |
| 70 | + "ico-music" : "%3Cpath d='m7,7v7.55c-.59-.34-1.27-.55-2-.55-2.21,0-4,1.79-4,4s1.79,4,4,4,4-1.79,4-4v-8.29l10-1.43v4.27c-.59-.34-1.27-.55-2-.55-2.21,0-4,1.79-4,4s1.79,4,4,4,4-1.79,4-4V2l-14,2v3Zm-2,13c-1.1,0-2-.9-2-2s.9-2,2-2,2,.9,2,2-.9,2-2,2Zm12-2c-1.1,0-2-.9-2-2s.9-2,2-2,2,.9,2,2-.9,2-2,2ZM9,7v-1.27l10-1.43v1.96l-10,1.43v-.69Z'/%3E", | |
| 71 | + "ico-openinnew" : "%3Cpath d='m2,21c0,.55.45,1,1,1h18c.55,0,1-.45,1-1v-9h-2v8H4V4h8v-2H3c-.55,0-1,.45-1,1v18Z'/%3E%3Cpath d='m22,10V3c0-.55-.45-1-1-1h-7v2h4.59l-7.29,7.29,1.41,1.41,7.29-7.29v4.59h2Z'/%3E", | |
| 72 | + "ico-plus" : "%3Cpolygon points='13 3 11 3 11 11 3 11 3 13 11 13 11 21 13 21 13 13 21 13 21 11 13 11 13 3'/%3E", | |
| 73 | + "ico-people" : "%3Cpath class='cls-2' d='m9,11c2.206,0,4-1.794,4-4s-1.794-4-4-4-4,1.794-4,4,1.794,4,4,4Zm0-6c1.103,0,2,.897,2,2s-.897,2-2,2-2-.897-2-2,.897-2,2-2Z'/%3E%3Cpath class='cls-2' d='m17,12c1.654,0,3-1.346,3-3s-1.346-3-3-3-3,1.346-3,3,1.346,3,3,3Zm0-4c.552,0,1,.448,1,1s-.448,1-1,1-1-.448-1-1,.448-1,1-1Z'/%3E%3Cpath class='cls-2' d='m22,17c0-2.206-1.794-4-4-4h-4.031c-.833-.62-1.854-1-2.969-1h-4c-2.757,0-5,2.243-5,5v5h14v-2h6v-3Zm-18,3v-3c0-1.654,1.346-3,3-3h4c.794,0,1.512.316,2.05.821.083.078.156.163.228.249.058.068.119.133.17.206.071.1.127.208.185.316.037.069.08.134.112.206.059.135.1.278.139.42.015.054.038.104.049.159.043.203.066.411.066.621v3H4Zm16-2h-4v-1c0-.35-.037-.691-.106-1.02-.012-.057-.038-.11-.052-.167-.066-.27-.143-.536-.252-.787-.004-.008-.005-.018-.008-.026h2.418c1.103,0,2,.897,2,2v1Z'/%3E", | |
| 74 | + "ico-profile" : "%3Cpath d='m12,12c2.76,0,5-2.24,5-5s-2.24-5-5-5-5,2.24-5,5,2.24,5,5,5Zm0-8c1.65,0,3,1.35,3,3s-1.35,3-3,3-3-1.35-3-3,1.35-3,3-3Z'/%3E%3Cpath d='m22,18c0-2.21-1.79-4-4-4H6c-2.21,0-4,1.79-4,4v4h20v-4Zm-2,2H4v-2c0-1.1.9-2,2-2h12c1.1,0,2,.9,2,2v2Z'/%3E", | |
| 75 | + "ico-phone" : "%3Cdefs%3E%3CclipPath id='clippath'%3E%3Crect class='cls-1' width='24' height='24'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='cls-3'%3E%3Crect class='cls-2' x='9' y='6' width='6' height='2'/%3E%3Cpath class='cls-2' d='M17,20H7V4h10v16ZM19,2H5v20h14V2Z'/%3E%3C/g%3E", | |
| 76 | + "ico-pin" : "%3Cpath class='cls-2' d='M15,1l-3,3c.333.333.667.667,1,1l-4,4c-.364-.087-.888-.18-1.514-.18-.449,0-.951.048-1.486.18-2.453.607-3.71,2.529-4,3,1.431,1.431,2.862,2.862,4.293,4.293l-4,4,1.414,1.414,4-4c1.431,1.431,2.862,2.862,4.293,4.293.471-.29,2.393-1.547,3-4,.317-1.279.15-2.374,0-3l4-4c.333.333.667.667,1,1l3-3L15,1ZM19.938,9.233c-.293-.156-.615-.233-.938-.233-.512,0-1.024.195-1.414.586l-4,4c-.492.492-.693,1.203-.531,1.879.165.689.166,1.399.004,2.055-.183.739-.547,1.328-.934,1.776l-7.421-7.421c.449-.387,1.037-.751,1.776-.934.326-.081.664-.122,1.005-.122.348,0,.701.042,1.049.125.154.037.31.055.465.055.524,0,1.035-.206,1.414-.586l4-4c.637-.637.754-1.597.353-2.353l.233-.233,5.172,5.172-.233.233Z'/%3E", | |
| 77 | + "ico-pin-active" : "%3Cpath class='cls-2' d='M15,1l-3,3c.333.333.667.667,1,1-1.333,1.333-2.667,2.667-4,4-.626-.15-1.721-.317-3,0-2.453.607-3.71,2.529-4,3,1.431,1.431,2.862,2.862,4.293,4.293l-4,4,1.414,1.414,4-4c1.431,1.431,2.862,2.862,4.293,4.293.471-.29,2.393-1.547,3-4,.317-1.279.15-2.374,0-3,1.333-1.333,2.667-2.667,4-4,.333.333.667.667,1,1l3-3L15,1Z'/%3E", | |
| 78 | + "ico-power" : "%3Cpath d='m5.64,5.64c-1.7,1.7-2.64,3.96-2.64,6.36s.94,4.66,2.64,6.36c1.7,1.7,3.96,2.64,6.36,2.64s4.66-.94,6.36-2.64c1.7-1.7,2.64-3.96,2.64-6.36s-.94-4.66-2.64-6.36l-1.41,1.41c1.32,1.32,2.05,3.08,2.05,4.95s-.73,3.63-2.05,4.95-3.08,2.05-4.95,2.05-3.63-.73-4.95-2.05-2.05-3.08-2.05-4.95.73-3.63,2.05-4.95l-1.41-1.41Z'/%3E%3Crect x='11' y='2' width='2' height='10'/%3E", | |
| 79 | + "ico-print" : "%3Cpath class='cls-2' d='m22,7h-4V2H6v5H2v13h4v2h12v-2h4V7Zm-14-3h8v3h-8v-3Zm0,16v-5h8v5h-8Zm12-2h-2v-5H6v5h-2v-9h16v9Z'/%3E%3Ccircle class='cls-2' cx='7' cy='11' r='1'/%3E", | |
| 80 | + "ico-redo" : "%3Cpath d='m16.71,3.29l-1.41,1.41,3.29,3.29h-10.59c-3.31,0-6,2.69-6,6s2.69,6,6,6h8v-2h-8c-2.21,0-4-1.79-4-4s1.79-4,4-4h10.59l-3.29,3.29,1.41,1.41,5-5c.39-.39.39-1.02,0-1.41l-5-5Z'/%3E", | |
| 81 | + "ico-remove" : "%3Crect x='3' y='11' width='18' height='2'/%3E", | |
| 82 | + "ico-refresh" : "%3Cpath d='m4.93,19.07c1.95,1.95,4.51,2.92,7.07,2.92s5.12-.98,7.07-2.92c1.89-1.89,2.93-4.4,2.93-7.07h-2c0,2.14-.83,4.15-2.34,5.66-3.12,3.12-8.2,3.12-11.31,0s-3.12-8.2,0-11.31,7.8-3.1,10.94-.34h-2.28v2h5c.55,0,1-.45,1-1V2h-2v2.86c-3.9-3.83-10.2-3.81-14.07.06s-3.9,10.24,0,14.14Z'/%3E", | |
| 83 | + "ico-save" : "%3Cpath d='m2,22h20v-14l-6-6H2v20Zm14-2h-8v-4h8v4ZM8,4h4v3h-4v-3Zm-4,0h2v5h8v-5h1.17l4.83,4.83v11.17h-2v-6H6v6h-2V4Z'/%3E", | |
| 84 | + "ico-schedule" : "%3Cpath d='m13,7h-2v5c0,.27.11.52.29.71l4,4,1.41-1.41-3.71-3.71v-4.59Z'/%3E%3Cpath d='m12,2C6.48,2,2,6.48,2,12s4.48,10,10,10,10-4.48,10-10S17.52,2,12,2Zm0,18c-4.41,0-8-3.59-8-8S7.59,4,12,4s8,3.59,8,8-3.59,8-8,8Z'/%3E", | |
| 85 | + "ico-send" : "%3Cpath d='m4,12l-2,10,21-10L2,2l2,10Zm12.25-1H5.84l-1.1-5.48,11.5,5.48Zm-10.41,2h10.41l-11.5,5.48,1.1-5.48Z'/%3E", | |
| 86 | + "ico-setting" : "%3Cpath d='m12,9c-1.66,0-3,1.34-3,3s1.34,3,3,3,3-1.34,3-3-1.34-3-3-3Zm0,4c-.55,0-1-.45-1-1s.45-1,1-1,1,.45,1,1-.45,1-1,1Z'/%3E%3Cpath d='m19.16,4.4l-2.91.83c-.17-.11-.34-.21-.52-.31l-.73-2.93h-6l-.73,2.93c-.18.09-.35.2-.52.31l-2.91-.83-3,5.2,2.18,2.1c0,.1-.02.2-.02.3s.01.2.02.3l-2.18,2.1,3,5.2,2.91-.83c.17.11.34.21.52.31l.73,2.93h6l.73-2.93c.18-.09.35-.2.52-.31l2.91.83,3-5.2-2.18-2.1c0-.1.02-.2.02-.3s-.01-.2-.02-.3l2.18-2.1-3-5.2Zm-1.16,7.56v.03s0,.06,0,.06c0,.06,0,.12-.01.18-.02.57.2,1.12.61,1.51l1.05,1.02-1.44,2.49-1.41-.4c-.18-.05-.37-.08-.55-.08-.37,0-.74.1-1.07.31-.13.08-.26.16-.39.23-.5.27-.87.73-1.01,1.28l-.35,1.41h-2.88l-.35-1.41c-.14-.55-.5-1.02-1.01-1.28-.13-.07-.26-.15-.39-.23-.32-.2-.69-.31-1.07-.31-.18,0-.37.03-.55.08l-1.4.4-1.44-2.49,1.05-1.02c.41-.39.63-.94.61-1.51,0-.06,0-.12-.01-.18v-.03s0-.06,0-.06c0-.06,0-.12.01-.18.02-.57-.2-1.12-.61-1.51l-1.05-1.02,1.44-2.49,1.4.4c.18.05.37.08.55.08.37,0,.74-.1,1.07-.31.13-.08.26-.16.39-.23.5-.27.87-.73,1.01-1.28l.35-1.41h2.88l.35,1.41c.14.55.5,1.02,1.01,1.28.13.07.26.15.39.23.32.2.69.31,1.07.31.18,0,.37-.03.55-.08l1.41-.4,1.44,2.49-1.05,1.02c-.41.39-.63.94-.61,1.51,0,.06,0,.12.01.18Z'/%3E", | |
| 87 | + "ico-share" : "%3Cpath d='m6,16c1.13,0,2.14-.47,2.87-1.22l3.28,2.19c-.09.33-.15.67-.15,1.03,0,2.21,1.79,4,4,4s4-1.79,4-4-1.79-4-4-4c-1.13,0-2.14.47-2.87,1.22l-3.28-2.19c.09-.33.15-.67.15-1.03s-.06-.7-.15-1.03l3.28-2.19c.73.75,1.74,1.22,2.87,1.22,2.21,0,4-1.79,4-4s-1.79-4-4-4-4,1.79-4,4c0,.36.06.7.15,1.03l-3.28,2.19c-.73-.75-1.74-1.22-2.87-1.22-2.21,0-4,1.79-4,4s1.79,4,4,4Zm10,0c1.1,0,2,.9,2,2s-.9,2-2,2-2-.9-2-2,.9-2,2-2Zm0-12c1.1,0,2,.9,2,2s-.9,2-2,2-2-.9-2-2,.9-2,2-2Zm-10,6c1.1,0,2,.9,2,2s-.9,2-2,2-2-.9-2-2,.9-2,2-2Z'/%3E", | |
| 88 | + "ico-sound" : "%3Cpath d='m16.8,15.6c1.04-1.39,1.2-2.85,1.2-3.6,0-1.74-.75-3-1.2-3.6l-1.6,1.2c.3.4.8,1.24.8,2.4,0,.5-.1,1.47-.8,2.4l1.6,1.2Z'/%3E%3Cpath d='m18.69,4.28l-1.38,1.45c.63.6,2.69,2.83,2.69,6.28s-2.06,5.67-2.69,6.28l1.38,1.45c.78-.74,3.31-3.48,3.31-7.72s-2.53-6.99-3.31-7.72Z'/%3E%3Cpath d='m14,21V3l-8,5H2v8h4l8,5ZM4,10h2c.37,0,.74-.11,1.06-.3l4.94-3.09v10.78l-4.94-3.09c-.32-.2-.69-.3-1.06-.3h-2v-4Z'/%3E", | |
| 89 | + "ico-star" : "%3Cpath d='m15.63,7.6l-3.63-6.6-3.63,6.6-7.37,1.42,5.13,5.5-.93,7.48,6.8-3.2,6.8,3.2-.93-7.48,5.13-5.5-7.37-1.42Zm.78,5.56c-.4.43-.6,1.02-.52,1.61l.48,3.88-3.52-1.65c-.27-.13-.56-.19-.85-.19s-.58.06-.85.19l-3.52,1.65.48-3.88c.07-.59-.12-1.18-.52-1.61l-2.67-2.86,3.82-.74c.58-.11,1.09-.48,1.37-1l1.87-3.41,1.87,3.41c.29.52.79.89,1.37,1l3.82.74-2.67,2.86Z'/%3E", | |
| 90 | + "ico-star-active" : "%3Cpolygon class='cls-1' points='12 1 15.627 7.597 23 9.021 17.869 14.523 18.798 22 12 18.803 5.202 22 6.131 14.523 1 9.021 8.373 7.597 12 1'/%3E", | |
| 91 | + "ico-sun" : "%3Cpath class='cls-2' d='M12,19c-3.859,0-7-3.141-7-7s3.141-7,7-7,7,3.141,7,7-3.141,7-7,7ZM12,7c-2.757,0-5,2.243-5,5s2.243,5,5,5,5-2.243,5-5-2.243-5-5-5Z'/%3E%3Crect class='cls-2' x='11' y='1' width='2' height='3'/%3E%3Crect class='cls-2' x='2.773' y='5.75' width='2' height='3' transform='translate(-4.392 6.893) rotate(-60.005)'/%3E%3Crect class='cls-2' x='2.273' y='15.75' width='3' height='2' transform='translate(-7.868 4.129) rotate(-29.995)'/%3E%3Crect class='cls-2' x='11' y='20' width='2' height='3'/%3E%3Crect class='cls-2' x='19.227' y='15.25' width='2' height='3' transform='translate(-4.392 25.894) rotate(-60.005)'/%3E%3Crect class='cls-2' x='18.727' y='6.25' width='3' height='2' transform='translate(-.915 11.083) rotate(-29.995)'/%3E", | |
| 92 | + "ico-thumb-up" : "%3Cpath d='m18.46,9h-4.46l.42-2.51c.3-1.83-1.11-3.49-2.96-3.49h-2.46l-2,6H3l-1,12h18l1.42-8.51c.3-1.83-1.11-3.49-2.96-3.49Zm-12.3,10h-1.99l.67-8h1.99l-.67,8Zm13.29-6.84l-1.14,6.84h-10.13l.8-9.59,1.47-4.41h1.02c.4,0,.65.22.76.35.11.13.29.41.22.81l-.42,2.51c-.1.58.07,1.17.45,1.62.38.45.94.71,1.53.71h4.46c.4,0,.65.22.76.35.11.13.29.41.22.81Z'/%3E", | |
| 93 | + "ico-thumb-down" : "%3Cpath d='m16,3H4l-1.42,8.51c-.3,1.83,1.11,3.49,2.96,3.49h4.46l-.42,2.51c-.3,1.83,1.11,3.49,2.96,3.49h2.46l2-6h4l1-12h-6Zm-.97,11.59l-1.47,4.41h-1.02c-.4,0-.65-.22-.76-.35s-.29-.41-.22-.81l.42-2.51c.1-.58-.07-1.17-.45-1.62-.38-.45-.94-.71-1.53-.71h-4.46c-.4,0-.65-.22-.76-.35s-.29-.41-.22-.81l1.14-6.84h10.13l-.8,9.59Zm4.13-1.59h-1.99l.67-8h1.99l-.67,8Z'/%3E", | |
| 94 | + "ico-trophy" : "%3Cpath class='cls-2' d='M21,5h-2v-2c0-.553-.448-1-1-1H6c-.552,0-1,.447-1,1v2h-2c-.552,0-1,.447-1,1v3c0,2.757,2.243,5,5,5h.111c.594.581,1.29,1.055,2.058,1.396.014.457-.014.903-.134,1.341-.123.451-.331.867-.581,1.263h-1.454c-.552,0-1,.447-1,1v3c0,.553.448,1,1,1h10c.552,0,1-.447,1-1v-3c0-.553-.448-1-1-1h-1.454c-.25-.396-.459-.812-.581-1.263-.119-.438-.148-.884-.134-1.341.769-.342,1.465-.816,2.058-1.396h.111c2.757,0,5-2.243,5-5v-3c0-.553-.448-1-1-1ZM7,4h10v5c0,.326-.036.644-.096.953-.026.135-.075.264-.112.396-.048.169-.091.339-.155.5-.061.153-.142.297-.218.443-.067.128-.129.259-.207.381-.096.15-.209.29-.321.43-.67.838-1.594,1.455-2.664,1.728-.109.028-.217.059-.327.079-.284.052-.575.087-.874.088-.019,0-.038,0-.057,0-.297-.002-.586-.036-.869-.088-.109-.02-.217-.051-.325-.079-1.07-.272-1.994-.889-2.664-1.727-.113-.141-.227-.283-.323-.434-.076-.119-.137-.246-.202-.372-.078-.149-.16-.296-.223-.451-.063-.158-.106-.325-.153-.49-.039-.135-.087-.266-.114-.404-.06-.309-.096-.626-.096-.952V4ZM4,9v-2h1v2c0,.231.012.46.035.688.011.117.033.231.05.347.016.107.028.214.049.32.029.145.067.286.104.427.019.073.035.148.057.22.046.154.101.303.158.453.018.048.031.098.051.145-.898-.52-1.503-1.49-1.503-2.6ZM16,21h-8v-1h8v1ZM12.819,15.951c.027.444.1.883.216,1.312.068.251.151.497.248.737h-2.565c.097-.24.179-.486.248-.737.117-.429.189-.866.216-1.312.012.001.023,0,.035.002.258.029.518.047.784.047s.526-.018.784-.047c.012-.001.023,0,.035-.002ZM20,9c0,1.109-.605,2.08-1.503,2.6.022-.055.038-.112.058-.168.053-.141.105-.282.148-.427.023-.078.04-.158.061-.237.036-.137.073-.273.101-.413.021-.107.034-.216.05-.325.017-.114.038-.227.05-.343.023-.228.035-.457.035-.688v-2h1v2Z'/%3E", | |
| 95 | + "ico-undo" : "%3Cpath d='m16,8H5.41l3.29-3.29-1.41-1.41-5,5c-.39.39-.39,1.02,0,1.41l5,5,1.41-1.41-3.29-3.29h10.59c2.21,0,4,1.79,4,4s-1.79,4-4,4h-8v2h8c3.31,0,6-2.69,6-6s-2.69-6-6-6Z'/%3E", | |
| 96 | + "ico-unlock" : "%3Cpath d='m12,4c1.65,0,3,1.35,3,3h2c0-2.76-2.24-5-5-5s-5,2.24-5,5v3h-3v12h16v-12h-11v-3c0-1.65,1.35-3,3-3Zm6,16H6v-8h12v8Z'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E", | |
| 97 | + "ico-update" : "%3Cpath d='m17.66,17.66c-1.51,1.51-3.52,2.34-5.66,2.34s-4.15-.83-5.66-2.34-2.34-3.52-2.34-5.66.83-4.15,2.34-5.66,3.52-2.34,5.66-2.34c1.97,0,3.82.71,5.28,2h-2.28v2h5c.55,0,1-.45,1-1V2h-2v2.86c-1.88-1.85-4.36-2.86-7-2.86s-5.18,1.04-7.07,2.93c-1.89,1.89-2.93,4.4-2.93,7.07s1.04,5.18,2.93,7.07c1.89,1.89,4.4,2.93,7.07,2.93s5.18-1.04,7.07-2.93c1.89-1.89,2.93-4.4,2.93-7.07h-2c0,2.14-.83,4.15-2.34,5.66Z'/%3E%3Cpath d='m11,7v5c0,.27.11.52.29.71l4,4,1.41-1.41-3.71-3.71v-4.59h-2Z'/%3E", | |
| 98 | + "ico-upload" : "%3Cpath d='m3,21h18c.55,0,1-.45,1-1v-9h-2v8H4v-8h-2v9c0,.55.45,1,1,1Z'/%3E%3Cpath d='m17.71,7.29l-5-5c-.39-.39-1.02-.39-1.41,0l-5,5,1.41,1.41,3.29-3.29v10.58h2V5.41s3.29,3.29,3.29,3.29l1.41-1.41Z'/%3E", | |
| 99 | + "ico-video" : "%3Cpath d='m16,5H2v14h14v-2.5l6,1.5V6l-6,1.5v-2.5Zm-2,3v9H4V7h10v1Zm6,.56v6.88l-4-1v-4.88l4-1Z'/%3E", | |
| 100 | + "ico-visibility" : "%3Cpath d='m12,5c-4.46,0-8.47,2.81-10,7,1.53,4.19,5.54,7,10,7s8.47-2.81,10-7c-1.53-4.19-5.54-7-10-7Zm0,12c-3.37,0-6.43-1.98-7.84-5,1.41-3.02,4.47-5,7.84-5s6.43,1.98,7.84,5c-1.41,3.02-4.47,5-7.84,5Z'/%3E%3Cpath d='m12,8c-2.21,0-4,1.79-4,4s1.79,4,4,4,4-1.79,4-4-1.79-4-4-4Zm0,6c-1.1,0-2-.9-2-2s.9-2,2-2,2,.9,2,2-.9,2-2,2Z'/%3E", | |
| 101 | + "ico-visibility-off" : "%3Cpath d='m12,19c1.61,0,3.16-.37,4.55-1.03l3.74,3.74,1.41-1.41-3.39-3.39c1.65-1.22,2.95-2.9,3.68-4.91-1.53-4.19-5.54-7-10-7-1.61,0-3.16.37-4.55,1.03l-3.74-3.74-1.41,1.41,3.39,3.39c-1.65,1.22-2.95,2.9-3.68,4.91,1.53,4.19,5.54,7,10,7Zm0-12c3.37,0,6.43,1.98,7.84,5-.66,1.42-1.7,2.6-2.96,3.47l-1.45-1.45c.35-.59.57-1.28.57-2.02,0-2.21-1.79-4-4-4-.74,0-1.43.21-2.02.57l-1-1c.95-.36,1.96-.57,3.02-.57Zm-1.93,4.49l2.44,2.44c-.16.04-.33.07-.51.07-1.1,0-2-.9-2-2,0-.18.03-.35.07-.51Zm1.41-1.41c.16-.04.33-.07.51-.07,1.1,0,2,.9,2,2,0,.18-.03.35-.07.51l-2.44-2.44Zm-4.37-1.54l1.45,1.45c-.35.59-.57,1.28-.57,2.02,0,2.21,1.79,4,4,4,.74,0,1.43-.21,2.02-.57l1,1c-.95.36-1.96.57-3.02.57-3.37,0-6.43-1.98-7.84-5,.66-1.42,1.7-2.6,2.96-3.47Z'/%3E", | |
| 102 | + "ico-warning" : "%3Cpath d='m1,21h22L12,2,1,21Zm3.47-2l7.53-13.01,7.53,13.01H4.47Z'/%3E%3Ccircle cx='12' cy='17' r='1'/%3E%3Crect x='11' y='10' width='2' height='5'/%3E", | |
| 103 | + "ico-zoomin" : "%3Cpolygon points='9 14 11 14 11 11 14 11 14 9 11 9 11 6 9 6 9 9 6 9 6 11 9 11 9 14'/%3E%3Cpath d='m2,10c0,4.42,3.58,8,8,8,1.85,0,3.55-.63,4.9-1.69l5.39,5.39,1.41-1.41-5.39-5.39c1.05-1.35,1.69-3.05,1.69-4.9,0-4.42-3.58-8-8-8S2,5.58,2,10Zm8-6c3.31,0,6,2.69,6,6s-2.69,6-6,6-6-2.69-6-6,2.69-6,6-6Z'/%3E", | |
| 104 | + "ico-zoomout" : "%3Crect x='6' y='9' width='8' height='2'/%3E%3Cpath d='m10,18c1.85,0,3.55-.63,4.9-1.69l5.39,5.39,1.41-1.41-5.39-5.39c1.05-1.35,1.69-3.05,1.69-4.9,0-4.42-3.58-8-8-8S2,5.58,2,10s3.58,8,8,8Zm0-14c3.31,0,6,2.69,6,6s-2.69,6-6,6-6-2.69-6-6,2.69-6,6-6Z'/%3E", | |
| 105 | + "ico-hamburger" : "%3Cpath d='M21,11H3v2h18V11z'/%3E%3Cpath d='M21,5H3v2h18V5z'/%3E%3Cpath d='M21,17H3v2h18V17z'/%3E", | |
| 106 | + "ico-app" : "%3Cpath d='M9.999,11H2.999c-.552,0-1-.448-1-1V3c0-.552.448-1,1-1h7c.552,0,1,.448,1,1v7c0,.552-.448,1-1,1M3.999,9h5V4H3.999v5Z'/%3E%3Cpath d='M21,11h-7c-.552,0-1-.448-1-1V3c0-.552.448-1,1-1h7c.552,0,1,.448,1,1v7c0,.552-.448,1-1,1M15,9h5V4h-5v5Z'/%3E%3Cpath d='M9.999,22H2.999c-.552,0-1-.448-1-1v-7c0-.552.448-1,1-1h7c.552,0,1,.448,1,1v7c0,.552-.448,1-1,1M3.999,20h5v-5H3.999v5Z'/%3E%3Cpath d='M21,22h-7c-.552,0-1-.448-1-1v-7c0-.552.448-1,1-1h7c.552,0,1,.448,1,1v7c0,.552-.448,1-1,1M15,20h5v-5h-5v5Z'/%3E", | |
| 107 | + "ico-notification" : "%3Cpath class='cls-2' d='M19,19h2v-2h-2v-6c0-3.526-2.609-6.434-6-6.92v-2.08h-2v2.08c-3.391.486-6,3.395-6,6.92v6h-2v2h16ZM7,11c0-2.757,2.243-5,5-5s5,2.243,5,5v6H7v-6Z'/%3E%3Cpath class='cls-2' d='M12,22c1.105,0,2-.895,2-2h-4c0,1.105.895,2,2,2Z'/%3E", | |
| 108 | + "ico-circle-cancle" : "%3Cpath class='cls-2' d='M12,4c4.411,0,8,3.589,8,8s-3.589,8-8,8-8-3.589-8-8S7.589,4,12,4M12,2C6.477,2,2,6.477,2,12s4.477,10,10,10,10-4.477,10-10S17.523,2,12,2h0Z'/%3E%3Cpolygon class='cls-2' points='16.707 8.707 15.293 7.293 12 10.586 8.707 7.293 7.293 8.707 10.586 12 7.293 15.293 8.707 16.707 12 13.414 15.293 16.707 16.707 15.293 13.414 12 16.707 8.707'/%3E", | |
| 109 | + "ico-sort" : "%3Cg clip-path='url(%23clip0_2769_1491)'%3E%3Cpath d='M9.41085 8.08919L10.5892 6.91086L6.42251 2.74419C6.09668 2.41836 5.57001 2.41836 5.24418 2.74419L1.07751 6.91086L2.25585 8.08919L5.00001 5.34503V17.5H6.66668V5.34503L9.41085 8.08919Z' fill='%23333333'/%3E%3Cpath d='M17.7442 11.9109L15 14.655V2.50003H13.3333V14.655L10.5892 11.9109L9.41085 13.0892L13.5775 17.2559C13.74 17.4184 13.9533 17.5 14.1667 17.5C14.38 17.5 14.5933 17.4184 14.7558 17.2559L18.9225 13.0892L17.7442 11.9109Z' fill='%23333333'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2769_1491'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E", | |
| 110 | + "ico-thumblist" : "%3Cg clip-path='url(%23clip0_2771_1560)'%3E%3Cpath d='M9 11H3C2.447 11 2 10.553 2 10V4C2 3.447 2.447 3 3 3H9C9.553 3 10 3.447 10 4V10C10 10.553 9.553 11 9 11ZM4 9H8V5H4V9Z' fill='%23333333'/%3E%3Cpath d='M9 21H3C2.447 21 2 20.553 2 20V14C2 13.447 2.447 13 3 13H9C9.553 13 10 13.447 10 14V20C10 20.553 9.553 21 9 21ZM4 19H8V15H4V19Z' fill='%23333333'/%3E%3Cpath d='M22 4H12V6H22V4Z' fill='%23333333'/%3E%3Cpath d='M22 8H12V10H22V8Z' fill='%23333333'/%3E%3Cpath d='M22 14H12V16H22V14Z' fill='%23333333'/%3E%3Cpath d='M22 18H12V20H22V18Z' fill='%23333333'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2771_1560'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E", | |
| 111 | + "ico-circle-chevron-up" : "%3Cpath d='M11.293 8.29301L6.29297 13.293L7.70697 14.707L12 10.414L16.293 14.707L17.707 13.293L12.707 8.29301C12.316 7.90201 11.684 7.90201 11.293 8.29301Z' fill='%23333333'/%3E%3Cpath d='M12 2C6.486 2 2 6.486 2 12C2 17.514 6.486 22 12 22C17.514 22 22 17.514 22 12C22 6.486 17.514 2 12 2ZM12 20C7.589 20 4 16.411 4 12C4 7.589 7.589 4 12 4C16.411 4 20 7.589 20 12C20 16.411 16.411 20 12 20Z' fill='%23333333'/%3E", | |
| 112 | + | |
| 113 | + "ico-circle-chevron-down" : "%3Cpath class='cls-2' d='M12,13.586l-4.293-4.293-1.414,1.414,5,5c.195.195.451.293.707.293s.512-.098.707-.293l5-5-1.414-1.414-4.293,4.293Z'/%3E%3Cpath class='cls-2' d='M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10,10-4.486,10-10S17.514,2,12,2ZM12,20c-4.411,0-8-3.589-8-8S7.589,4,12,4s8,3.589,8,8-3.589,8-8,8Z'/%3E", | |
| 114 | + "ico-circle-chevron-left" : "%3Cpath class='cls-2' d='M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10,10-4.486,10-10S17.514,2,12,2ZM12,20c-4.411,0-8-3.589-8-8S7.589,4,12,4s8,3.589,8,8-3.589,8-8,8Z'/%3E%3Cpath class='cls-2' d='M13.293,6.293l-5,5c-.391.391-.391,1.023,0,1.414l5,5,1.414-1.414-4.293-4.293,4.293-4.293-1.414-1.414Z'/%3E", | |
| 115 | + "ico-circle-chevron-right" : "%3Cpath class='cls-2' d='M10.707,6.293l-1.414,1.414,4.293,4.293-4.293,4.293,1.414,1.414,5-5c.391-.391.391-1.023,0-1.414l-5-5Z'/%3E%3Cpath class='cls-2' d='M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10,10-4.486,10-10S17.514,2,12,2ZM12,20c-4.411,0-8-3.589-8-8S7.589,4,12,4s8,3.589,8,8-3.589,8-8,8Z'/%3E", | |
| 116 | + "ico-circle-plus" : "%3Cpolygon class='cls-2' points='13 7 11 7 11 11 7 11 7 13 11 13 11 17 13 17 13 13 17 13 17 11 13 11 13 7'/%3E%3Cpath class='cls-2' d='M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10,10-4.486,10-10S17.514,2,12,2ZM12,20c-4.411,0-8-3.589-8-8S7.589,4,12,4s8,3.589,8,8-3.589,8-8,8Z'/%3E", | |
| 117 | + "ico-circle-minus" : "%3Crect class='cls-2' x='7' y='11' width='10' height='2'/%3E%3Cpath class='cls-2' d='M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10,10-4.486,10-10S17.514,2,12,2ZM12,20c-4.411,0-8-3.589-8-8S7.589,4,12,4s8,3.589,8,8-3.589,8-8,8Z'/%3E", | |
| 118 | + "ico-circle-close" : "%3Cpolygon class='cls-2' points='15.293 7.293 12 10.586 8.707 7.293 7.293 8.707 10.586 12 7.293 15.293 8.707 16.707 12 13.414 15.293 16.707 16.707 15.293 13.414 12 16.707 8.707 15.293 7.293'/%3E%3Cpath class='cls-2' d='M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10,10-4.486,10-10S17.514,2,12,2ZM12,20c-4.411,0-8-3.589-8-8S7.589,4,12,4s8,3.589,8,8-3.589,8-8,8Z'/%3E", | |
| 119 | + "ico-circle-check" : "%3Cpath class='cls-2' d='M16.293,8.293l-5.293,5.293-3.293-3.293-1.414,1.414,4,4c.195.195.451.293.707.293s.512-.098.707-.293l6-6-1.414-1.414Z'/%3E%3Cpath class='cls-2' d='M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10,10-4.486,10-10S17.514,2,12,2ZM12,20c-4.411,0-8-3.589-8-8S7.589,4,12,4s8,3.589,8,8-3.589,8-8,8Z'/%3E", | |
| 120 | + "ico-adjust" : "%3Cpath class='cls-2' d='M18.816,5c-.414-1.161-1.514-2-2.816-2s-2.402.839-2.816,2H3v2h10.184c.414,1.161,1.514,2,2.816,2s2.402-.839,2.816-2h2.184v-2h-2.184ZM16,7c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z'/%3E%3Cpath class='cls-2' d='M8,9c-1.302,0-2.402.839-2.816,2h-2.184v2h2.184c.414,1.161,1.514,2,2.816,2s2.402-.839,2.816-2h10.184v-2h-10.184c-.414-1.161-1.514-2-2.816-2ZM8,13c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z'/%3E%3Cpath class='cls-2' d='M16,15c-1.302,0-2.402.839-2.816,2H3v2h10.184c.414,1.161,1.514,2,2.816,2s2.402-.839,2.816-2h2.184v-2h-2.184c-.414-1.161-1.514-2-2.816-2ZM16,19c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z'/%3E", | |
| 121 | + "ico-" : "%3Cpath class='cls-2' d='M12.47,3.956l-6.47,4.044H2v8h4l6.47,4.044c.666.416,1.53-.063,1.53-.848V4.804c0-.785-.864-1.264-1.53-.848ZM12,17.391l-4.94-3.087c-.318-.199-.685-.304-1.06-.304h-2v-4h2c.375,0,.742-.105,1.06-.304l4.94-3.087v10.782Z'/%3E%3Cpolygon class='cls-2' points='22.707 9.707 21.293 8.293 19 10.586 16.707 8.293 15.293 9.707 17.586 12 15.293 14.293 16.707 15.707 19 13.414 21.293 15.707 22.707 14.293 20.414 12 22.707 9.707'/%3E", | |
| 122 | + "ico-sound-mute" : "%3Cpath d='M12.47,3.956l-6.47,4.044H2v8h4l6.47,4.044c.666.416,1.53-.063,1.53-.848V4.804c0-.785-.864-1.264-1.53-.848ZM12,17.391l-4.94-3.087c-.318-.199-.685-.304-1.06-.304h-2v-4h2c.375,0,.742-.105,1.06-.304l4.94-3.087v10.782Z'/%3E%3Cpolygon points='22.707 9.707 21.293 8.293 19 10.586 16.707 8.293 15.293 9.707 17.586 12 15.293 14.293 16.707 15.707 19 13.414 21.293 15.707 22.707 14.293 20.414 12 22.707 9.707'/%3E", | |
| 123 | + "ico-link-item" : "%3Cpath d='M4,4h10v1h2v-2c0-.552-.448-1-1-1H3c-.552,0-1,.448-1,1v12c0,.552.448,1,1,1h2v-2h-1V4Z'/%3E%3Cpath d='M21,8h-2v2h1v10h-10v-1h-2v2c0,.552.448,1,1,1h12c.552,0,1-.448,1-1v-12c0-.552-.448-1-1-1Z'/%3E%3Cpath d='M8.892,18.23c.837,0,1.624-.326,2.216-.918l.477-.477-1.414-1.414-.477.476c-.214.215-.5.333-.803.333-.336-.002-.593-.12-.808-.338-.438-.444-.433-1.163.009-1.602l2.989-2.964c.439-.435,1.152-.434,1.589.003l1.414-1.414c-1.213-1.215-3.193-1.218-4.411-.009l-2.989,2.964c-1.223,1.213-1.234,3.198-.026,4.426.591.599,1.38.931,2.221.934h.012Z'/%3E%3Cpath d='M12.906,6.686l-.5.509,1.428,1.4.49-.5c.438-.435,1.151-.435,1.589.003.439.439.439,1.153,0,1.592l-2.976,2.977c-.214.214-.499.332-.802.332-.33-.032-.594-.121-.809-.339l-1.425,1.404c.591.6,1.38.932,2.222.935h.012c.837,0,1.624-.326,2.216-.918l2.976-2.977c1.219-1.219,1.219-3.201,0-4.42-1.214-1.214-3.193-1.219-4.421,0Z'/%3E", | |
| 124 | + "ico-shuffle" : "%3Cpath d='M18.707,13.293l-1.414,1.414,1.293,1.293h-3.172l-4-4,4-4h3.172l-1.293,1.293,1.414,1.414,3-3c.391-.391.391-1.023,0-1.414l-3-3-1.414,1.414,1.293,1.293h-3.586c-.265,0-.52.105-.707.293l-4.293,4.293-4.293-4.293c-.188-.188-.442-.293-.707-.293h-3v2h2.586l4,4-4,4h-2.586v2h3c.265,0,.52-.105.707-.293l4.293-4.293,4.293,4.293c.188.188.442.293.707.293h3.586l-1.293,1.293,1.414,1.414,3-3c.391-.391.391-1.023,0-1.414l-3-3Z'/%3E", | |
| 125 | + "ico-repeat" : "%3Cpath d='M18,10.586l-1.293-1.293-1.414,1.414,3,3c.195.195.451.293.707.293s.512-.098.707-.293l3-3-1.414-1.414-1.293,1.293v-4.586c0-.552-.448-1-1-1H4v2h14v3.586Z'/%3E%3Cpath d='M6,12.414l1.293,1.293,1.414-1.414-3-3c-.391-.391-1.023-.391-1.414,0l-3,3,1.414,1.414,1.293-1.293v5.586c0,.552.448,1,1,1h15v-2H6v-4.586Z'/%3E", | |
| 126 | + "ico-arrows" : "%3Cpath d='M11.293,9.707l1.414-1.414L7.707,3.293c-.391-.391-1.023-.391-1.414,0L1.293,8.293l1.414,1.414,3.293-3.293v14.586h2V6.414l3.293,3.293Z'/%3E%3Cpath d='M21.293,14.293l-3.293,3.293V3h-2v14.586l-3.293-3.293-1.414,1.414,5,5c.195.195.451.293.707.293s.512-.098.707-.293l5-5-1.414-1.414Z'/%3E", | |
| 127 | + "ico-arrow-up-right" : "%3Cpath d='M19,4H7v2h9.586l-12.293,12.293,1.414,1.414,12.293-12.293v9.586h2V5c0-.552-.447-1-1-1Z'/%3E", | |
| 128 | + "ico-arrow-up-left" : "%3Cpath d='M19.707,18.293L7.414,6h9.586v-2H5c-.553,0-1,.448-1,1v12h2V7.414l12.293,12.293,1.414-1.414Z'/%3E", | |
| 129 | + "ico-arrow-down-left" : "%3Cpath d='M19.707,5.707l-1.414-1.414-12.293,12.293V7h-2v12c0,.553.447,1,1,1h12v-2H7.414l12.293-12.293Z'/%3E", | |
| 130 | + "ico-arrow-down-right" : "%3Cpath d='M18,7v9.586L5.707,4.293l-1.414,1.414,12.293,12.293H7v2h12c.553,0,1-.447,1-1V7h-2Z'/%3E", | |
| 131 | + "ico-chevron-left" : "%3Cpath d='M15.293,21.707L6.293,12.707c-.391-.391-.391-1.023,0-1.414L15.293,2.293l1.414,1.414-8.293,8.293,8.293,8.293-1.414,1.414Z'/%3E", | |
| 132 | + "ico-chevron-right" : "%3Cpath d='M8.707,21.707l-1.414-1.414,8.293-8.293L7.293,3.707l1.414-1.414,9,9c.391.391.391,1.023,0,1.414l-9,9Z'/%3E", | |
| 133 | + "ico-chevron-up" : "%3Cpath d='M20.293,16.707l-8.293-8.293L3.708,16.707l-1.414-1.414L11.293,6.293c.391-.391,1.023-.391,1.414,0l9,9-1.414,1.414Z'/%3E", | |
| 134 | + "ico-chevron-down" : "%3Cpath d='M12,18c-.256,0-.512-.098-.707-.293L2.293,8.707l1.414-1.414,8.293,8.293,8.293-8.293,1.414,1.414-9,9c-.195.195-.451.293-.707.293Z'/%3E", | |
| 135 | + "ico-chevron-double-left" : "%3Cpath d='M13.293,21.707L4.293,12.707c-.391-.391-.391-1.023,0-1.414L13.293,2.293l1.414,1.414L6.414,12l8.293,8.293-1.414,1.414Z'/%3E%3Cpath d='M18.293,21.707l-9-9c-.391-.391-.391-1.023,0-1.414L18.293,2.293l1.414,1.414-8.293,8.293,8.293,8.293-1.414,1.414Z'/%3E", | |
| 136 | + "ico-chevron-double-right" : "%3Cpath d='M10.707,21.707l-1.414-1.414,8.293-8.293L9.293,3.707l1.414-1.414,9,9c.391.391.391,1.023,0,1.414l-9,9Z'/%3E%3Cpath d='M5.707,21.707l-1.414-1.414,8.293-8.293L4.293,3.707l1.414-1.414,9,9c.391.391.391,1.023,0,1.414l-9,9Z'/%3E", | |
| 137 | + "ico-chevron-double-up" : "%3Cpath d='M20.293,14.707L12,6.414,3.707,14.707l-1.414-1.414L11.293,4.293c.391-.391,1.023-.391,1.414,0l9,9-1.414,1.414Z'/%3E%3Cpath d='M20.293,19.707l-8.293-8.293L3.707,19.707l-1.414-1.414,9-9c.391-.391,1.023-.391,1.414,0l9,9-1.414,1.414Z'/%3E", | |
| 138 | + "ico-chevron-double-down" : "%3Cpath d='M12,20c-.256,0-.512-.098-.707-.293L2.293,10.707l1.414-1.414,8.293,8.293,8.293-8.293,1.414,1.414-9,9c-.195.195-.451.293-.707.293Z'/%3E%3Cpath d='M12,15c-.256,0-.512-.098-.707-.293L2.293,5.707l1.414-1.414,8.293,8.293,8.293-8.293,1.414,1.414-9,9c-.195.195-.451.293-.707.293Z'/%3E", | |
| 139 | + "ico-caret-left" : "%3Cpath d='M7.533,11.6l6.667-5c.33-.247.8-.012.8.4v10c0,.412-.47.647-.8.4l-6.667-5c-.267-.2-.267-.6,0-.8Z'/%3E", | |
| 140 | + "ico-caret-right" : "%3Cpath d='M16.467,11.6l-6.667-5c-.33-.247-.8-.012-.8.4v10c0,.412.47.647.8.4l6.667-5c.267-.2.267-.6,0-.8Z'/%3E", | |
| 141 | + "ico-caret-up" : "%3Cpath d='M11.6,7.533l-5,6.667c-.247.33-.012.8.4.8h10c.412,0,.647-.47.4-.8l-5-6.667c-.2-.267-.6-.267-.8,0Z'/%3E", | |
| 142 | + "ico-caret-down" : "%3Cpath d='M11.6,16.467l-5-6.667c-.247-.33-.012-.8.4-.8h10c.412,0,.647.47.4.8l-5,6.667c-.2.267-.6.267-.8,0Z'/%3E", | |
| 143 | + "ico-caret-sort" : "%3Cpath d='M11.593,2.57l-4.028,5.64c-.236.331,0,.791.407.791h8.057c.407,0,.643-.46.407-.791l-4.028-5.64c-.199-.279-.614-.279-.814,0Z'/%3E%3Cpath d='M11.593,21.43l-4.028-5.64c-.236-.331,0-.791.407-.791h8.057c.407,0,.643.46.407.791l-4.028,5.64c-.199.279-.614.279-.814,0Z'/%3E", | |
| 144 | + "ico-sprout" : "%3Cpath d='M23,4c-.708-.175-1.761-.374-3.032-.374-.896,0-1.9.099-2.968.374-1.167.301-2.701.696-4,2-.421.422-.734.882-1,1.348-.266-.466-.579-.926-1-1.348-1.299-1.304-2.833-1.699-4-2-1.068-.275-2.072-.374-2.968-.374-1.271,0-2.324.199-3.032.374-.024.777-.015,3.547,2,6,.555.675,2.174,2.585,5,3,.369.054.726.078,1.068.078.719,0,1.369-.106,1.932-.254v2.228c-3.945.37-7,2.889-7,5.948h16c0-3.059-3.055-5.578-7-5.948v-2.228c.563.148,1.213.254,1.932.254.342,0,.699-.024,1.068-.078,2.826-.415,4.445-2.325,5-3,2.015-2.453,2.024-5.223,2-6ZM8.29,11.021c-2.119-.311-3.343-1.801-3.745-2.29-.843-1.027-1.236-2.146-1.413-3.066.301-.026.601-.039.9-.039.838,0,1.669.105,2.469.311,1.067.275,2.17.559,3.082,1.475.997,1,1.322,2.318,1.41,3.324-.527.188-1.183.342-1.925.342-.259,0-.521-.019-.778-.057ZM6.832,19c1.055-1.186,2.999-2,5.168-2s4.113.814,5.168,2H6.832ZM19.455,8.731c-.402.489-1.626,1.979-3.745,2.29-.257.038-.519.057-.778.057-.742,0-1.398-.154-1.925-.342.088-1.006.413-2.324,1.41-3.324.912-.916,2.015-1.2,3.082-1.475.8-.206,1.631-.311,2.469-.311.299,0,.599.013.9.039-.177.92-.57,2.039-1.413,3.066Z'/%3E", | |
| 145 | + "ico-clover" : "%3Cpath d='M19,12c.408-.325.735-.666,1-1,2.3-2.896,1.281-6.988,1-8-.508-.141-1.791-.468-3.31-.468-1.508,0-3.247.322-4.69,1.468-.333.265-.674.592-1,1-.325-.408-.666-.735-1-1-1.442-1.146-3.182-1.468-4.689-1.468-1.519,0-2.803.327-3.311.468-.281,1.012-1.3,5.104,1,8,.265.334.593.675,1,1-.407.325-.735.666-1,1-2.3,2.896-1.281,6.988-1,8,.508.141,1.792.468,3.311.468,1.507,0,3.247-.322,4.689-1.468.334-.265.675-.592,1-1,.326.408.667.735,1,1,1.443,1.146,3.182,1.468,4.69,1.468,1.519,0,2.802-.327,3.31-.468.281-1.012,1.3-5.104-1-8-.265-.334-.592-.675-1-1ZM14.244,5.566c.864-.686,2.023-1.034,3.446-1.034.526,0,1.079.048,1.637.142.247,1.455.311,3.566-.893,5.082-.197.248-.426.477-.682.681l-.705.563h-4.047v-4.047l.563-.705c.204-.256.433-.485.681-.682ZM4.674,4.674c.557-.094,1.11-.142,1.636-.142,1.423,0,2.583.348,3.446,1.034.248.197.477.426.681.682l.563.705v4.047h-4.047l-.705-.563c-.255-.204-.485-.433-.682-.681-1.204-1.516-1.139-3.627-.892-5.082ZM10.437,17.752c-.204.256-.433.485-.681.682-.864.686-2.023,1.034-3.445,1.034-.527,0-1.08-.048-1.637-.142-.247-1.455-.312-3.566.892-5.082.197-.248.427-.477.682-.681l.705-.563h4.047v4.047l-.563.705ZM19.327,19.326c-.558.094-1.111.142-1.637.142-1.423,0-2.582-.348-3.446-1.034-.248-.197-.477-.426-.681-.682l-.563-.705v-4.047h4.047l.705.563c.256.204.485.433.682.681,1.204,1.516,1.14,3.627.893,5.082Z'/%3E", | |
| 146 | + "ico-tree" : "%3Cpath d='M19.729,10.985c.164-.467.271-.962.271-1.485,0-2.316-1.756-4.201-4.005-4.45,0-.017.005-.033.005-.05,0-2.209-1.791-4-4-4s-4,1.791-4,4c0,.017.005.033.005.05-2.249.249-4.005,2.134-4.005,4.45,0,.523.107,1.018.271,1.485-.793.953-1.271,2.178-1.271,3.515,0,3.038,2.462,5.5,5.5,5.5h2.5v3h2v-3h2.5c3.038,0,5.5-2.462,5.5-5.5,0-1.337-.478-2.562-1.271-3.515ZM15.5,18h-2.5v-.586l2.707-2.707-1.414-1.414-1.293,1.293v-3.586h-2v3.586l-1.293-1.293-1.414,1.414,2.707,2.707v.586h-2.5c-1.93,0-3.5-1.57-3.5-3.5,0-.827.279-1.6.808-2.236.45-.541.583-1.278.35-1.942-.106-.302-.158-.571-.158-.822,0-1.263.957-2.322,2.225-2.462,1.022-.114,1.791-.982,1.78-2.009,0-.034-.002-.068-.004-.102.039-1.069.921-1.927,1.999-1.927s1.962.86,1.999,1.931c-.002.034-.004.067-.004.098-.011,1.027.758,1.895,1.78,2.009,1.268.14,2.225,1.199,2.225,2.462,0,.251-.052.52-.158.822-.233.664-.1,1.401.35,1.942.529.636.808,1.409.808,2.236,0,1.93-1.57,3.5-3.5,3.5Z'/%3E", | |
| 147 | + "ico-code-scan" : "%3Cpath d='M18,7c0-.553-.448-1-1-1H7c-.552,0-1,.447-1,1v4H2v2h4v4c0,.553.448,1,1,1h10c.552,0,1-.447,1-1v-4h4v-2h-4v-4ZM8,8h8v3h-8v-3ZM16,16h-8v-3h8v3Z'/%3E%3Cpath class='cls-2' d='M4,4h4v-2H3c-.552,0-1,.447-1,1v5h2v-4Z'/%3E%3Cpath class='cls-2' d='M4,16h-2v5c0,.553.448,1,1,1h5v-2h-4v-4Z'/%3E%3Cpath class='cls-2' d='M20,20h-4v2h5c.552,0,1-.447,1-1v-5h-2v4Z'/%3E%3Cpath class='cls-2' d='M21,2h-5v2h4v4h2V3c0-.553-.448-1-1-1Z'/%3E", | |
| 148 | + "ico-circle-play" : "%3Cpath d='M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10,10-4.486,10-10S17.514,2,12,2ZM12,20c-4.411,0-8-3.589-8-8S7.589,4,12,4s8,3.589,8,8-3.589,8-8,8Z'/%3E%3Cpath d='M16.555,11.168l-6-4c-.307-.205-.703-.225-1.026-.05-.325.174-.528.513-.528.882v8c0,.369.203.708.528.882.147.079.31.118.472.118.194,0,.387-.057.555-.168l6-4c.278-.186.445-.498.445-.832s-.167-.646-.445-.832Z'/%3E", | |
| 149 | + "ico-circle-pause" : "%3Cpath d='M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10,10-4.486,10-10S17.514,2,12,2ZM12,20c-4.411,0-8-3.589-8-8S7.589,4,12,4s8,3.589,8,8-3.589,8-8,8Z'/%3E%3Crect x='9' y='7' width='2' height='10'/%3E%3Crect x='13' y='7' width='2' height='10'/%3E", | |
| 150 | + "ico-circle-stop" : "%3Cpath d='M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10,10-4.486,10-10S17.514,2,12,2ZM12,20c-4.411,0-8-3.589-8-8S7.589,4,12,4s8,3.589,8,8-3.589,8-8,8Z'/%3E%3Crect x='8' y='8' width='8' height='8' rx='1' ry='1'/%3E", | |
| 151 | + "ico-present" : "%3Cpath d='M21,6h-1.149c.332-1.18.05-2.498-.876-3.425-1.364-1.365-3.584-1.363-4.949,0l-2.025,2.026-2.025-2.026c-1.364-1.365-3.585-1.363-4.949,0-.927.926-1.208,2.245-.876,3.425h-1.149c-.552,0-1,.447-1,1v4c0,.553.448,1,1,1v9c0,.553.448,1,1,1h16c.552,0,1-.447,1-1v-9c.552,0,1-.447,1-1v-4c0-.553-.448-1-1-1ZM20,10h-7v-2h7v2ZM15.439,3.989c.585-.584,1.536-.584,2.121,0,.552.552.564,1.422.074,2.011h-4.205l2.01-2.011ZM6.439,3.989c.585-.584,1.536-.584,2.121,0l2.01,2.011h-4.205c-.49-.589-.479-1.459.074-2.011ZM4,8h7v2h-7v-2ZM5,12h6v8h-6v-8ZM19,20h-6v-8h6v8Z'/%3E", | |
| 152 | + "ico-text-scale" : "%3Cpolygon points='21 3.5 7 3.5 7 6.5 12.5 6.5 12.5 21 15.5 21 15.5 6.5 21 6.5 21 3.5'/%3E%3Cpolygon points='2 11 5 11 5 20 7 20 7 11 10 11 10 9 2 9 2 11'/%3E", | |
| 153 | + "ico-siren" : "%3Cpath d='M20,16h-1v-3c0-3.859-3.141-7-7-7s-7,3.141-7,7v3h-1c-.553,0-1,.447-1,1v4c0,.553.447,1,1,1h16c.553,0,1-.447,1-1v-4c0-.553-.447-1-1-1ZM7,13c0-2.757,2.243-5,5-5s5,2.243,5,5v3H7v-3ZM19,20H5v-2h14v2Z'/%3E%3Crect x='11' y='2' width='2' height='3'/%3E%3Crect class='cls-2' x='17.586' y='5' width='2.828' height='2' transform='translate(1.322 15.192) rotate(-45)'/%3E%3Crect x='4' y='4.586' width='2' height='2.828' transform='translate(-2.778 5.293) rotate(-45)'/%3E", | |
| 154 | + "ico-megaphone" : "%3Cpath d='M22,11c0-1.859-1.28-3.411-3-3.858V3c0-.347-.18-.668-.475-.851-.295-.184-.663-.199-.973-.044L7.764,7H3c-.553,0-1,.447-1,1v6c0,.553.447,1,1,1h1.245l1.793,6.274c.123.43.516.726.962.726h4c.313,0,.609-.147.798-.397.189-.251.25-.575.164-.877l-1.208-4.231,6.799,3.4c.142.07.294.105.447.105.183,0,.365-.05.525-.149.295-.183.475-.504.475-.851v-4.142c1.72-.447,3-1.999,3-3.858ZM4,9h3v4h-3v-4ZM9.675,20h-1.921l-1.428-5h1.438l.562.281,1.349,4.719ZM17,17.382l-7.384-3.692s0-.001-.002-.001l-.614-.307v-4.763l8-4v12.764ZM19,12.722v-3.443c.595.347,1,.985,1,1.722s-.405,1.375-1,1.722Z'/%3E", | |
| 155 | + "ico-mortarboard" : "%3Cpath d='M22.447,8.105L12.447,3.105c-.281-.141-.613-.141-.895,0L1.553,8.105c-.339.17-.553.516-.553.895s.214.725.553.895l2.447,1.224v6.882c0,.4.238.762.606.919l7,3c.125.054.26.081.394.081s.269-.027.394-.081l7-3c.368-.157.606-.519.606-.919v-6.882l1-.5v6.382h2v-8c0-.379-.214-.725-.553-.895ZM12,5.118l7.764,3.882-7.764,3.882-7.764-3.882,7.764-3.882ZM18,17.341l-6,2.571-6-2.571v-5.223l5.553,2.776c.141.07.294.105.447.105s.307-.035.447-.105l5.553-2.776v5.223Z'/%3E", | |
| 156 | + "ico-protect" : "%3Cpath d='M12,23c-.135,0-.271-.027-.396-.082-1.853-.801-4.474-2.383-6.438-5.368-2.879-4.374-2.463-8.957-2.149-10.724.067-.385.353-.694.729-.793,1.669-.439,3.274-1.081,4.771-1.908,1.001-.554,1.964-1.195,2.861-1.908.365-.289.879-.289,1.244,0,.897.713,1.86,1.354,2.861,1.908,1.497.827,3.103,1.469,4.771,1.908.377.099.662.408.729.793.313,1.767.729,6.35-2.149,10.724-1.965,2.985-4.586,4.567-6.438,5.368-.126.055-.262.082-.396.082ZM4.893,7.789c-.225,1.819-.258,5.317,1.942,8.661,1.559,2.367,3.601,3.713,5.165,4.452,1.564-.739,3.606-2.085,5.165-4.452,2.2-3.344,2.167-6.842,1.942-8.661-1.6-.471-3.142-1.112-4.591-1.914-.87-.48-1.714-1.022-2.517-1.615-.803.593-1.646,1.135-2.517,1.615-1.449.802-2.991,1.443-4.591,1.914Z'/%3E%3Cpath d='M11,16c-.256,0-.512-.098-.707-.293l-3-3,1.414-1.414,2.293,2.293,4.293-4.293,1.414,1.414-5,5c-.195.195-.451.293-.707.293Z'/%3E", | |
| 157 | +); | |
| 158 | + | |
| 159 | +$gnbIcons : ( | |
| 160 | + "gnb-home" : "%3Cpath d='m16,24.82v9.17h6v-6h4v6h6v-9.17l.59.59,1.41-1.41-2-2-6.59-6.59-1.41-1.41-1.41,1.41-6.59,6.59-2,2,1.41,1.41.59-.59Zm2-2l6-6,6,6v9.17h-2v-4c0-1.1-.9-2-2-2h-4c-1.1,0-2,.9-2,2v4h-2v-9.17Z'/%3E", | |
| 161 | + "gnb-myclass" : "%3Cpath d='m24,24c2.76,0,5-2.24,5-5s-2.24-5-5-5-5,2.24-5,5,2.24,5,5,5Zm0-8c1.65,0,3,1.35,3,3s-1.35,3-3,3-3-1.35-3-3,1.35-3,3-3Z'/%3E%3Cpath d='m34,30c0-2.21-1.79-4-4-4h-12c-2.21,0-4,1.79-4,4v4h20v-4Zm-2,2h-16v-2c0-1.1.9-2,2-2h12c1.1,0,2,.9,2,2v2Z'/%3E", | |
| 162 | + "gnb-contents" : "%3Cpath d='m35,22.88h-3.82v-3.45l.61.44c.18.13.38.19.58.19.31,0,.62-.14.81-.41.32-.45.22-1.07-.23-1.4l-8.38-6.05c-.36-.26-.84-.25-1.19.01l-8.01,6.05c-.44.33-.53.96-.19,1.4.33.44.96.53,1.4.19l.22-.17v3.19h-3.81c-.55,0-1,.45-1,1v11.1c0,.55.45,1,1,1h7.89s.03,0,.05,0h6.11s.03,0,.05,0h7.89c.55,0,1-.45,1-1v-11.1c0-.55-.45-1-1-1Zm-20.99,2h2.81v9.1h-2.81v-9.1Zm12.05,9.1h-4.11v-6.63h4.11v6.63Zm2,0v-7.63c0-.55-.45-1-1-1h-6.11c-.55,0-1,.45-1,1v7.63h-1.13v-15.8s0,0,0,0l5.2-3.93,5.17,3.73v16h-1.12Zm5.94,0h-2.82v-9.1h2.82v9.1Z'/%3E%3Cpath d='m24,17.17c-1.9,0-3.44,1.55-3.44,3.46s1.54,3.46,3.44,3.46,3.44-1.55,3.44-3.46-1.54-3.46-3.44-3.46Zm0,4.93c-.79,0-1.44-.66-1.44-1.46s.65-1.46,1.44-1.46,1.44.66,1.44,1.46-.65,1.46-1.44,1.46Z'/%3E", | |
| 163 | + "gnb-foundation" : "%3Cpath d='m35.08,13.86h-9.1l-1.08-1.52c-.19-.26-.49-.42-.81-.42-.34,0-.62.15-.81.41l-1.13,1.53h-9.23c-.55,0-1,.45-1,1v14.58c0,.55.45,1,1,1h7.44l-1.04,3.63h-2.38c-.55,0-1,.45-1,1s.45,1,1,1h3.13s0,0,0,0c0,0,0,0,0,0h7.84s0,0,0,0c0,0,0,0,0,0h3.13c.55,0,1-.45,1-1s-.45-1-1-1h-2.38l-1.04-3.63h7.44c.55,0,1-.45,1-1v-14.58c0-.55-.45-1-1-1Zm-8.32,4.56h-5.48l1.88-2.56h1.78l1.82,2.56Zm-1.76,10.02v-8.02h2.7v8.02h-2.7Zm-4.7,0v-8.02h2.7v8.02h-2.7Zm-6.38-12.58h6.76l-2.18,2.97s-.06.11-.09.16c-.01.02-.02.04-.03.06-.04.11-.07.22-.07.34,0,.01,0,.02,0,.03v9.02h-4.38v-12.58Zm12.67,18.22h-5.19l1.04-3.63h3.11l1.04,3.63Zm7.48-5.63h-4.38v-9.02s0-.02,0-.03c0-.12-.03-.23-.07-.34,0-.03-.02-.05-.04-.07-.02-.05-.04-.1-.07-.14l-2.12-2.98h6.68v12.58Z'/%3E", | |
| 164 | + "gnb-library" : "%3Cpath d='m26.73,32.03h-6.82c-.55,0-1-.45-1-1V13.05c0-.55.45-1,1-1h6.82c.55,0,1,.45,1,1v17.98c0,.55-.45,1-1,1Zm-5.82-2h4.82v-15.98h-4.82v15.98Z'/%3E%3Cpath d='m19.91,32.03h-4.79c-.55,0-1-.45-1-1V14.95c0-.55.45-1,1-1h4.79c.55,0,1,.45,1,1v16.07c0,.55-.45,1-1,1Zm-3.79-2h2.79v-14.07h-2.79v14.07Z'/%3E%3Cpath d='m32.88,32.03h-6.15c-.55,0-1-.45-1-1v-15.12c0-.55.45-1,1-1h6.15c.55,0,1,.45,1,1v15.12c0,.55-.45,1-1,1Zm-5.15-2h4.15v-13.12h-4.15v13.12Z'/%3E%3Cpath d='m26.73,18.81h-6.82c-.55,0-1-.45-1-1s.45-1,1-1h6.82c.55,0,1,.45,1,1s-.45,1-1,1Z'/%3E%3Cpath d='m26.73,22.62h-6.82c-.55,0-1-.45-1-1s.45-1,1-1h6.82c.55,0,1,.45,1,1s-.45,1-1,1Z'/%3E%3Cpath d='m34.91,35.95H13.09c-.55,0-1-.45-1-1v-3.92c0-.55.45-1,1-1h21.81c.55,0,1,.45,1,1v3.92c0,.55-.45,1-1,1Zm-20.81-2h19.81v-1.92H14.09v1.92Z'/%3E%3Cpath d='m29.81,28.4c-.55,0-1-.45-1-1v-3.8c0-.55.45-1,1-1s1,.45,1,1v3.8c0,.55-.45,1-1,1Z'/%3E", | |
| 165 | + "gnb-tools" : "%3Cpath d='m35,30.5H13c-.55,0-1-.45-1-1V13c0-.55.45-1,1-1h22c.55,0,1,.45,1,1v16.5c0,.55-.45,1-1,1Zm-21-2h20v-14.5H14v14.5Z'/%3E%3Cpath d='m31.1,36h-14.2c-.55,0-1-.45-1-1s.45-1,1-1h14.2c.55,0,1,.45,1,1s-.45,1-1,1Z'/%3E%3Cpath d='m20.1,36c-.09,0-.19-.01-.28-.04-.53-.16-.83-.71-.68-1.24l1.61-5.5c.16-.53.71-.83,1.24-.68.53.16.83.71.68,1.24l-1.61,5.5c-.13.44-.53.72-.96.72Z'/%3E%3Cpath d='m27.9,36c-.43,0-.83-.28-.96-.72l-1.61-5.5c-.15-.53.15-1.09.68-1.24.53-.16,1.08.15,1.24.68l1.61,5.5c.15.53-.15,1.09-.68,1.24-.09.03-.19.04-.28.04Z'/%3E%3Cpath d='m25.35,24.55c-.45,0-.48,0-4.25-3.82l-3.49,3.49c-.39.39-1.02.39-1.41,0s-.39-1.02,0-1.41l4.2-4.2c.19-.19.44-.29.71-.29h0c.27,0,.52.11.71.3,1.06,1.08,2.63,2.66,3.52,3.54l5.01-5.01c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-5.7,5.7c-.19.19-.44.29-.71.29Z'/%3E", | |
| 166 | + "gnb-pingpong" : "%3Cpath d='m30.71,17.25c-1.69-3.08-4.97-5.17-8.73-5.17-5.46,0-9.89,4.45-9.89,9.93v8.93c0,.55.45,1,1,1h5c1.82,2.4,4.7,3.97,7.94,3.97h8.89c.55,0,1-.45,1-1v-8.93c0-3.77-2.11-7.05-5.2-8.73Zm-16.63,4.76c0-4.37,3.54-7.93,7.89-7.93s7.96,3.56,7.96,7.93-3.57,7.93-7.96,7.93h-7.89v-7.93Zm19.83,11.9h-7.89c-2,0-3.82-.75-5.22-1.97h1.17c5.49,0,9.96-4.45,9.96-9.93,0-.47-.04-.93-.11-1.38,1.29,1.41,2.09,3.28,2.09,5.35v7.93Z'/%3E%3Cellipse cx='26.33' cy='22.28' rx='1.32' ry='1.32'/%3E%3Cpath d='m23.33,22.28c0-.73-.59-1.32-1.32-1.32s-1.32.59-1.32,1.32.59,1.32,1.32,1.32,1.32-.59,1.32-1.32Z'/%3E%3Cpath d='m17.69,20.96c-.73,0-1.32.59-1.32,1.32s.59,1.32,1.32,1.32,1.32-.59,1.32-1.32-.59-1.32-1.32-1.32Z'/%3E", | |
| 167 | + "gnb-psychology" : "%3Cpath d='m17,34h14V14h-14v20Zm2-18h2v1c0,.55.45,1,1,1h4c.55,0,1-.45,1-1v-1h2v16h-10v-16Z'/%3E%3Cpath d='m27,29h-6v2h6v-2Z'/%3E", | |
| 168 | + "gnb-archive" : "%3Cpath d='m31.21,28.43c2.62,0,4.76-2.3,4.76-5.14,0-2.55-1.73-4.67-3.99-5.07h0c0-3.35-2.51-6.06-5.59-6.06-2.17,0-4.1,1.34-5.02,3.39-.48-.18-.98-.27-1.48-.27-2.42,0-4.41,2.07-4.51,4.66-1.88.34-3.31,2.1-3.31,4.22,0,2.36,1.78,4.28,3.98,4.28h6.96v1.29c-.85.33-1.51,1.05-1.8,1.96h-6.44v2h6.44c.39,1.25,1.49,2.16,2.8,2.16s2.4-.91,2.8-2.16h6.65v-2h-6.65c-.29-.91-.95-1.64-1.8-1.96v-1.29h6.21Zm-7.21,5.41c-.53,0-.96-.52-.96-1.16s.43-1.16.96-1.16.96.52.96,1.16-.43,1.16-.96,1.16Zm-9.93-9.69c0-1.25.89-2.28,1.98-2.28.08,0,.15,0,.23.02.32.06.66-.05.89-.29.23-.24.33-.57.26-.9-.04-.17-.05-.36-.05-.56,0-1.58,1.13-2.87,2.51-2.87.63,0,1.13.28,1.43.52.27.21.63.27.95.15.32-.12.56-.39.64-.72.41-1.8,1.84-3.06,3.48-3.06,1.98,0,3.59,1.82,3.59,4.05,0,.24-.02.49-.07.76-.05.31.04.63.26.86.22.23.53.34.85.3.06.01.13.02.19.02,1.52,0,2.76,1.41,2.76,3.13s-1.24,3.14-2.76,3.14h-15.17c-1.09,0-1.98-1.02-1.98-2.28Z'/%3E", | |
| 169 | + "gnb-inquiry" : "%3Cpath d='M23.628 36.8448C23.2801 36.8448 23 36.4334 23 35.9224C23 35.4114 23.2801 35 23.628 35H26.0589C26.4068 35 26.6869 35.4114 26.6869 35.9224C26.6869 36.4334 26.4068 36.8448 26.0589 36.8448H23.628Z' fill='%2358585B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.357 34.7068C22.5954 34.3566 23.0274 34 23.628 34H26.0589C26.6595 34 27.0915 34.3566 27.33 34.7068C27.5712 35.0611 27.6869 35.494 27.6869 35.9224C27.6869 36.3508 27.5712 36.7837 27.33 37.138C27.0915 37.4882 26.6595 37.8448 26.0589 37.8448H23.628C23.0274 37.8448 22.5954 37.4882 22.357 37.138C22.1157 36.7837 22 36.3508 22 35.9224C22 35.494 22.1157 35.0611 22.357 34.7068Z' fill='%2300529B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32.9823 17.9887C32.9453 17.9846 32.9076 17.9824 32.8695 17.9824C32.3172 17.9824 31.8695 18.4301 31.8695 18.9824V30.9736C31.8695 31.5259 32.3172 31.9736 32.8695 31.9736C36.5515 31.9736 39.3999 28.767 39.3999 24.9807C39.3999 21.2331 36.6095 18.0534 32.9823 17.9887ZM33.8695 20.1115V29.8499C35.8479 29.3538 37.3999 27.4181 37.3999 24.9807C37.3999 22.5432 35.8479 20.6075 33.8695 20.1115Z' fill='%2300529B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.2782 17.9824C16.8305 17.9824 17.2782 18.4301 17.2782 18.9824V30.9736C17.2782 31.5259 16.8305 31.9736 16.2782 31.9736C12.2318 31.9736 8.82605 28.9124 8.82605 24.9807C8.82605 21.0848 12.1699 18.0437 16.1675 17.9885C16.2039 17.9845 16.2408 17.9824 16.2782 17.9824ZM15.2782 20.0705C12.6972 20.5046 10.826 22.5892 10.826 24.9807C10.826 27.3721 12.6972 29.4567 15.2782 29.8908V20.0705Z' fill='%2300529B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24.5561 12.603C20.1239 12.603 16.4575 15.4169 15.3965 19.1424C15.2452 19.6736 14.692 19.9816 14.1608 19.8303C13.6297 19.679 13.3217 19.1258 13.473 18.5946C14.7941 13.9559 19.2876 10.603 24.5561 10.603C29.8731 10.603 34.4017 14.0123 35.6781 18.7206C35.8226 19.2536 35.5076 19.8029 34.9746 19.9474C34.4415 20.0919 33.8923 19.7769 33.7478 19.2439C32.7232 15.4646 29.031 12.603 24.5561 12.603Z' fill='%2300529B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M33 31C33.5523 31 34 31.4477 34 32C34 34.987 30.9737 37 27.8148 37C27.0828 37 26.3778 36.8983 25.7204 36.7068C25.1901 36.5523 24.8855 35.9973 25.0399 35.467C25.1943 34.9368 25.7494 34.6321 26.2797 34.7866C26.7514 34.924 27.2679 35 27.8148 35C30.3827 35 32 33.4308 32 32C32 31.4477 32.4477 31 33 31Z' fill='%2300529B'/%3E%3Cpath d='M23.8865 27.0735V27.0048C23.8941 26.2759 23.9704 25.6958 24.1155 25.2645C24.2605 24.8333 24.4666 24.4841 24.7337 24.217C25.0008 23.9498 25.3214 23.7037 25.6954 23.4785C25.9206 23.3411 26.1228 23.1789 26.3022 22.9919C26.4816 22.8011 26.6228 22.5817 26.7258 22.3336C26.8327 22.0856 26.8861 21.8108 26.8861 21.5093C26.8861 21.1353 26.7983 20.8109 26.6228 20.5362C26.4472 20.2614 26.2125 20.0496 25.9187 19.9008C25.6248 19.7519 25.2985 19.6775 24.9398 19.6775C24.6268 19.6775 24.3254 19.7424 24.0353 19.8721C23.7453 20.0019 23.5029 20.2061 23.3083 20.4846C23.1137 20.7632 23.0011 21.1277 22.9706 21.578H21.528C21.5585 20.9292 21.7265 20.374 22.0318 19.9122C22.3409 19.4504 22.7473 19.0974 23.2511 18.8532C23.7586 18.6089 24.3215 18.4868 24.9398 18.4868C25.6114 18.4868 26.1953 18.6204 26.6915 18.8875C27.1914 19.1547 27.5768 19.521 27.8478 19.9866C28.1226 20.4522 28.2599 20.9827 28.2599 21.578C28.2599 21.9978 28.1951 22.3775 28.0653 22.7172C27.9394 23.0568 27.7562 23.3602 27.5158 23.6274C27.2792 23.8945 26.9929 24.1311 26.6571 24.3372C26.3213 24.5471 26.0522 24.7684 25.85 25.0012C25.6477 25.2302 25.5008 25.5031 25.4092 25.8198C25.3176 26.1366 25.268 26.5316 25.2603 27.0048V27.0735H23.8865ZM24.6192 30.4623C24.3368 30.4623 24.0945 30.3612 23.8922 30.1589C23.6899 29.9567 23.5888 29.7143 23.5888 29.4319C23.5888 29.1495 23.6899 28.9072 23.8922 28.7049C24.0945 28.5027 24.3368 28.4015 24.6192 28.4015C24.9016 28.4015 25.1439 28.5027 25.3462 28.7049C25.5485 28.9072 25.6496 29.1495 25.6496 29.4319C25.6496 29.6189 25.6019 29.7907 25.5065 29.9471C25.4149 30.1036 25.2909 30.2295 25.1344 30.3249C24.9818 30.4165 24.81 30.4623 24.6192 30.4623Z' fill='%2300529B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24.9398 18.7368C24.3554 18.7368 23.8302 18.852 23.3597 19.0783C22.896 19.3033 22.524 19.6265 22.2399 20.0507C22.0041 20.4076 21.855 20.8313 21.7986 21.328H22.7447C22.797 20.9458 22.9132 20.6137 23.1034 20.3415C23.3221 20.0284 23.5989 19.7935 23.9332 19.6439C24.2549 19.5 24.5911 19.4275 24.9398 19.4275C25.3342 19.4275 25.6997 19.5096 26.0316 19.6777C26.3649 19.8466 26.6336 20.0887 26.8334 20.4016C27.0383 20.7222 27.1361 21.0948 27.1361 21.5093C27.1361 21.8403 27.0774 22.1487 26.9561 22.431C26.8418 22.7056 26.6845 22.9502 26.4843 23.1632L26.4826 23.165C26.2881 23.3678 26.0689 23.5435 25.8256 23.6919L25.8243 23.6927C25.4651 23.909 25.1612 24.143 24.9105 24.3938C24.6756 24.6286 24.4876 24.9422 24.3524 25.3442C24.2309 25.7057 24.1576 26.1959 24.14 26.8235H25.0153C25.0316 26.4118 25.0816 26.0528 25.169 25.7504C25.27 25.4013 25.4336 25.0951 25.662 24.8364C25.8842 24.5808 26.1738 24.3445 26.5246 24.1252L26.5263 24.1241C26.8433 23.9296 27.11 23.7085 27.3286 23.4616L27.3299 23.4601C27.5491 23.2166 27.7159 22.9405 27.8309 22.6303L27.8318 22.628C27.9491 22.3208 28.0099 21.972 28.0099 21.578C28.0099 21.0227 27.8823 20.537 27.6325 20.1137L27.6317 20.1124C27.3853 19.689 27.0349 19.3545 26.5736 19.108C26.1203 18.8639 25.578 18.7368 24.9398 18.7368ZM23.1427 18.6279C23.6872 18.3659 24.2877 18.2368 24.9398 18.2368C25.6448 18.2368 26.2708 18.3772 26.8097 18.6673C27.3479 18.9549 27.768 19.3529 28.0635 19.8602C28.363 20.3679 28.5099 20.9429 28.5099 21.578C28.5099 22.0232 28.4412 22.4333 28.2993 22.8052C28.1626 23.1734 27.9634 23.5035 27.7023 23.7938C27.4481 24.0807 27.1428 24.3324 26.7887 24.5497C26.4687 24.7499 26.2207 24.9557 26.0387 25.1652L26.0373 25.1667C25.8615 25.3658 25.7315 25.6052 25.6493 25.8893C25.5661 26.1773 25.5179 26.5479 25.5103 27.0068V27.0735C25.5103 27.2115 25.3984 27.3235 25.2603 27.3235H23.8865C23.7484 27.3235 23.6365 27.2115 23.6365 27.0735V27.0022C23.6442 26.2608 23.7216 25.6513 23.8785 25.1849C24.0333 24.7244 24.2575 24.3396 24.5569 24.0402C24.8403 23.7568 25.1773 23.4987 25.5658 23.2647C25.7723 23.1387 25.9571 22.9904 26.1209 22.8198C26.2787 22.6518 26.4033 22.4583 26.4949 22.2377L26.4962 22.2347C26.5881 22.0213 26.6361 21.7808 26.6361 21.5093C26.6361 21.1758 26.5583 20.8997 26.4121 20.6708C26.2609 20.4341 26.0601 20.2526 25.8057 20.1238C25.5499 19.9942 25.2628 19.9275 24.9398 19.9275C24.6626 19.9275 24.3958 19.9847 24.1374 20.1003C23.8916 20.2103 23.6838 20.3837 23.5133 20.6278C23.3519 20.8588 23.2484 21.1755 23.22 21.5949C23.2111 21.7261 23.1021 21.828 22.9706 21.828H21.528C21.4597 21.828 21.3943 21.8 21.3471 21.7506C21.3 21.7011 21.2751 21.6345 21.2783 21.5663C21.3106 20.8804 21.4891 20.2797 21.8232 19.7743L21.824 19.7731C22.158 19.2742 22.5993 18.8914 23.1427 18.6279ZM24.6192 28.6515C24.4041 28.6515 24.225 28.7256 24.069 28.8817C23.9129 29.0378 23.8388 29.2168 23.8388 29.4319C23.8388 29.6471 23.9129 29.8261 24.069 29.9822C24.225 30.1382 24.4041 30.2123 24.6192 30.2123C24.7678 30.2123 24.8942 30.1773 25.005 30.111C25.1262 30.037 25.2204 29.941 25.2907 29.8208L25.293 29.817C25.364 29.7005 25.3996 29.574 25.3996 29.4319C25.3996 29.2168 25.3255 29.0378 25.1694 28.8817C25.0134 28.7256 24.8344 28.6515 24.6192 28.6515ZM23.7154 28.5282C23.9639 28.2797 24.2695 28.1515 24.6192 28.1515C24.9689 28.1515 25.2745 28.2797 25.523 28.5282C25.7715 28.7766 25.8996 29.0823 25.8996 29.4319C25.8996 29.6631 25.8402 29.8794 25.7211 30.0754C25.6085 30.267 25.4553 30.4221 25.2646 30.5384L25.263 30.5393C25.0687 30.6559 24.852 30.7123 24.6192 30.7123C24.2695 30.7123 23.9639 30.5842 23.7154 30.3357C23.467 30.0872 23.3388 29.7816 23.3388 29.4319C23.3388 29.0823 23.467 28.7766 23.7154 28.5282Z' fill='%2300529B'/%3E", | |
| 170 | +); | |
| 171 | + | |
| 172 | +$fncIcons : ( | |
| 173 | + "fnc-message" : "%3Ccircle fill='%23fff' cx='19.49' cy='16' r='3'/%3E%3Cg%3E%3Cpath d='m19.63,15.38s-2.08-1.53-2.08-6.58c0-.73-.14-1.45-.42-2.12-.28-.68-.68-1.28-1.2-1.8-.52-.52-1.12-.92-1.8-1.2-1.35-.56-2.89-.56-4.25,0-.68.28-1.28.69-1.8,1.2-.52.52-.92,1.12-1.2,1.8-.28.68-.42,1.39-.42,2.12,0,5.05-2.05,6.57-2.07,6.58-.28.18-.4.53-.3.84.1.32.39.53.72.53h14.4c.33,0,.61-.21.71-.53.1-.31-.02-.65-.29-.84Zm-13.2-.13c.73-1.17,1.53-3.19,1.53-6.45,0-.53.1-1.06.31-1.55.21-.49.5-.94.88-1.31s.82-.67,1.31-.88c.99-.41,2.11-.41,3.1,0,.49.2.94.5,1.31.88s.67.82.88,1.31c.21.49.31,1.02.31,1.55,0,3.26.79,5.28,1.53,6.45H6.43Z'/%3E%3Cpath d='m13.77,18.55c-.36-.21-.82-.09-1.03.27-.08.13-.18.24-.31.31-.25.15-.59.15-.85,0-.13-.08-.24-.18-.31-.31-.21-.36-.67-.48-1.03-.27-.36.21-.48.67-.27,1.03.21.35.5.65.86.86.36.2.76.31,1.17.31s.82-.11,1.17-.31c.36-.21.65-.5.86-.86.21-.36.09-.82-.27-1.03Z'/%3E%3C/g%3E", | |
| 174 | + "fnc-favorite" : "%3Ccircle fill='%23fff' cx='18' cy='15' r='3'/%3E%3Cpath d='m16.44,20.74c-.44,0-.98-.12-1.62-.45-.12-.06-2.03-1.02-2.82-1.42-.79.4-2.7,1.36-2.82,1.42-1.48.77-2.41.38-2.83.09-.4-.29-1.05-1-.84-2.53l.56-3.21c-.65-.63-2.19-2.13-2.28-2.21-.84-.8-1.2-1.7-.99-2.51.19-.75.82-1.32,1.78-1.59l.1-.02,3.66-.52,1.58-3.15c1.14-1.84,3.04-1.78,4.11-.06l1.62,3.21,3.76.54c.96.27,1.59.84,1.78,1.59.2.81-.15,1.71-1,2.52-.08.08-1.62,1.58-2.27,2.21l.55,3.18c.22,1.56-.43,2.27-.83,2.56-.24.17-.63.36-1.2.36ZM4.95,9.78c-.38.12-.64.3-.69.5-.05.2.08.59.58,1.07.12.11,2.56,2.49,2.56,2.49l.28.28-.69,3.96c-.07.51.01.93.22,1.08.18.13.61.15,1.27-.19.15-.08,3.17-1.6,3.17-1.6l.34-.17.34.17s3.01,1.52,3.17,1.6c.66.34,1.09.33,1.27.2.21-.15.29-.56.22-1.1l-.68-3.94.28-.28s2.44-2.37,2.55-2.48c.51-.49.64-.88.59-1.08-.05-.2-.3-.38-.69-.5l-4.38-.63-1.94-3.85c-.21-.34-.49-.57-.73-.57s-.52.23-.77.63l-1.9,3.79-4.38.63Z'/%3E", | |
| 175 | + "fnc-profile" : "%3Ccircle fill='%23fff' cx='12' cy='8' r='3'/%3E%3Cg%3E%3Cpath d='m18.6,15.18c-.81-.81-1.89-1.26-3.04-1.26h-7.11c-1.15,0-2.23.45-3.04,1.26-.8.8-1.26,1.91-1.26,3.04v1.78c0,.41.34.75.75.75s.75-.34.75-.75v-1.78c0-.74.3-1.46.82-1.98s1.24-.82,1.98-.82h7.11c.75,0,1.45.29,1.98.82.53.53.82,1.23.82,1.98v1.78c0,.41.34.75.75.75s.75-.34.75-.75v-1.78c0-1.15-.45-2.23-1.26-3.04Z'/%3E%3Cpath d='m8.95,10.6c.61.6,1.37,1.01,2.21,1.18.28.06.56.08.84.08.56,0,1.12-.11,1.65-.33.79-.33,1.46-.88,1.93-1.59.47-.71.73-1.54.73-2.39h0c0-1.15-.45-2.23-1.26-3.04-1.42-1.42-3.77-1.65-5.44-.54-.71.47-1.26,1.14-1.59,1.93-.33.79-.41,1.65-.25,2.49.17.84.57,1.6,1.18,2.21Zm.45-4.12c.21-.51.57-.95,1.03-1.26.46-.31,1-.47,1.56-.47.75,0,1.45.29,1.98.82.53.53.82,1.23.82,1.98h0c0,.56-.16,1.1-.47,1.56-.31.46-.74.82-1.26,1.03s-1.08.27-1.62.16c-.55-.11-1.04-.37-1.44-.77-.39-.39-.66-.89-.77-1.44-.11-.55-.05-1.11.16-1.62Z'/%3E%3C/g%3E", | |
| 176 | + "fnc-logout" : "%3Ccircle fill='%23fff' cx='20' cy='12' r='3'/%3E%3Cg%3E%3Cpath d='m9.33,19.25h-3.55c-.27,0-.53-.11-.73-.3-.19-.2-.3-.45-.3-.73V5.78c0-.27.11-.54.3-.73.19-.19.45-.3.73-.3h3.55c.41,0,.75-.34.75-.75s-.34-.75-.75-.75h-3.55c-.67,0-1.31.26-1.79.74-.47.47-.74,1.12-.74,1.79v12.44c0,.67.26,1.31.74,1.79.48.48,1.11.74,1.79.74h3.55c.41,0,.75-.34.75-.75s-.34-.75-.75-.75Z'/%3E%3Cpath d='m20.75,12c0-.21-.09-.4-.23-.54l-4.44-4.44c-.29-.29-.77-.29-1.06,0s-.29.77,0,1.06l3.16,3.17h-8.85c-.41,0-.75.34-.75.75s.34.75.75.75h8.85l-3.16,3.16c-.29.29-.29.77,0,1.06.15.15.34.22.53.22s.38-.07.53-.22l4.43-4.43c.14-.14.23-.33.23-.54Z'/%3E%3C/g%3E", | |
| 177 | + "fnc-login" : "%3Ccircle fill='%23fff' cx='14' cy='12' r='3'/%3E%3Cg%3E%3Cpath d='m20.01,3.99c-.48-.48-1.11-.74-1.79-.74h-3.55c-.41,0-.75.34-.75.75s.34.75.75.75h3.55c.27,0,.53.11.73.3s.3.46.3.73v12.44c0,.27-.11.53-.3.73-.2.19-.45.3-.73.3h-3.55c-.41,0-.75.34-.75.75s.34.75.75.75h3.55c.67,0,1.31-.26,1.79-.74.48-.48.74-1.11.74-1.79V5.78c0-.67-.27-1.32-.74-1.79Z'/%3E%3Cpath d='m15.41,12c0-.21-.09-.4-.23-.54l-4.44-4.44c-.29-.29-.77-.29-1.06,0s-.29.77,0,1.06l3.16,3.17H4c-.41,0-.75.34-.75.75s.34.75.75.75h8.85l-3.16,3.16c-.29.29-.29.77,0,1.06.15.15.34.22.53.22s.38-.07.53-.22l4.43-4.43c.14-.14.23-.33.23-.54Z'/%3E%3C/g%3E", | |
| 178 | + "fnc-setting" : "%3Ccircle fill='%23fff' cx='12' cy='12' r='3'/%3E%3Cg%3E%3Cpath d='m10.55,9.74c-.48.32-.86.78-1.08,1.32-.22.54-.28,1.12-.17,1.69.11.57.39,1.09.8,1.5s.93.69,1.5.8c.19.04.38.06.57.06.38,0,.76-.08,1.12-.22.54-.22.99-.6,1.32-1.08.32-.48.5-1.05.5-1.63,0-.77-.31-1.53-.86-2.07-.96-.96-2.57-1.12-3.7-.36Zm2.82,3.23c-.16.24-.38.42-.64.53-.26.11-.55.14-.83.08-.28-.06-.53-.19-.73-.39-.2-.2-.34-.45-.39-.73-.05-.28-.03-.57.08-.83.11-.26.29-.48.53-.64.24-.16.51-.24.79-.24.38,0,.74.15,1.01.42.27.27.42.64.42,1.01,0,.28-.08.56-.24.8Z'/%3E%3Cpath d='m20.62,11.14c-.11-.27-.28-.52-.49-.72-.21-.21-.46-.37-.73-.47-.28-.11-.56-.15-.84-.15h-.12c-.09,0-.17-.03-.25-.07-.05-.03-.09-.07-.12-.12-.01-.05-.03-.1-.05-.14-.04-.08-.05-.17-.03-.26.02-.09.06-.17.16-.27.42-.42.64-.97.64-1.56s-.23-1.14-.65-1.56c-.83-.83-2.25-.87-3.15.04-.06.06-.15.1-.24.12-.09.02-.18,0-.26-.03-.08-.03-.15-.09-.2-.17-.05-.08-.08-.16-.08-.29,0-.3-.04-.59-.15-.86-.11-.28-.27-.52-.47-.74-.21-.21-.45-.38-.72-.49-.55-.23-1.16-.23-1.71,0-.27.11-.51.28-.72.49-.21.21-.36.46-.47.73-.11.28-.16.56-.15.84v.12c0,.09-.03.17-.07.24-.03.05-.07.09-.12.12-.05.01-.1.03-.14.05-.08.04-.17.05-.26.03-.09-.02-.17-.06-.26-.14-.2-.22-.45-.39-.72-.51-.27-.12-.56-.18-.86-.19-.33,0-.59.05-.86.16-.27.11-.52.27-.74.49-.21.21-.37.46-.48.73-.11.27-.17.56-.16.87,0,.3.07.59.19.86.12.27.29.51.53.74.06.06.11.15.12.23.02.09,0,.18-.05.31-.03.08-.09.16-.16.21-.07.05-.16.08-.28.08-.29,0-.58.04-.86.15-.27.11-.52.27-.74.47-.21.21-.38.45-.49.72-.11.27-.17.56-.17.86s.06.58.17.86c.12.27.28.52.49.72.21.21.46.37.73.47.28.11.57.16.84.15h.11c.09,0,.18.03.25.08.07.05.13.12.17.2.04.08.04.18.03.27-.02.09-.06.17-.15.27-.41.41-.65.98-.65,1.56s.24,1.15.65,1.56c.83.83,2.25.87,3.16-.04.06-.06.14-.1.23-.12.09-.02.18,0,.31.05.08.03.16.09.21.16.05.07.08.16.08.28,0,.29.04.58.15.87.11.27.27.52.47.73.21.21.45.38.72.49.27.11.56.17.86.17s.58-.06.86-.17c.27-.11.51-.28.72-.49.21-.21.37-.46.47-.73.11-.28.16-.57.15-.84v-.11c0-.09.03-.18.08-.25.05-.08.12-.13.2-.17.08-.03.17-.05.26-.03.09.02.17.06.27.16.21.21.45.37.71.48.54.22,1.15.22,1.69,0,.27-.11.51-.27.72-.48.21-.21.37-.45.48-.71.11-.27.17-.55.17-.84s-.06-.58-.17-.84c-.11-.27-.27-.51-.52-.75-.06-.06-.1-.14-.12-.23-.02-.09,0-.18.03-.26,0,0,0,0,0,0,.03-.08.09-.15.17-.2.07-.05.16-.08.29-.08.29,0,.58-.04.86-.15.28-.11.52-.27.74-.47.21-.21.38-.45.49-.72.11-.27.17-.56.17-.86s-.06-.58-.17-.86Zm-1.38,1.13c-.04.08-.09.16-.16.23-.07.07-.15.12-.24.15-.09.03-.18.05-.37.05-.38,0-.75.11-1.07.32-.32.21-.56.5-.71.85-.16.36-.2.75-.13,1.13.07.39.25.74.57,1.06.07.07.12.15.16.23.04.08.05.17.05.27s-.02.18-.05.27c-.04.09-.09.16-.15.23s-.14.12-.23.15c-.17.07-.37.07-.54,0-.09-.04-.16-.09-.28-.21-.28-.27-.62-.45-1-.52-.38-.07-.76-.03-1.12.12-.35.15-.65.4-.87.71-.21.32-.33.69-.33,1.08v.15c0,.09-.01.18-.05.27-.03.09-.08.17-.15.23-.07.07-.15.12-.23.16-.18.07-.37.07-.55,0-.08-.04-.17-.09-.23-.16-.07-.07-.12-.15-.15-.24-.04-.09-.05-.18-.05-.27v-.11c0-.39-.14-.77-.36-1.09-.23-.32-.54-.56-.87-.68-.25-.11-.52-.17-.79-.17-.12,0-.23.01-.35.03-.39.07-.74.25-1.06.57-.27.27-.73.27-1,0-.13-.13-.21-.31-.21-.5s.08-.37.26-.55c.27-.28.45-.62.51-1,.07-.38.03-.76-.12-1.12-.15-.35-.4-.66-.71-.87-.32-.21-.69-.33-1.08-.33h-.15c-.09,0-.18-.01-.27-.05-.09-.03-.17-.08-.23-.15-.07-.07-.12-.14-.16-.23-.04-.09-.06-.18-.06-.27s.02-.19.05-.27c.04-.09.09-.17.16-.23.07-.07.15-.12.24-.15.09-.03.16-.06.28-.05.01,0,.09,0,.1,0,.39,0,.77-.13,1.09-.36.32-.23.56-.54.68-.87.16-.36.2-.75.13-1.14-.07-.39-.25-.74-.59-1.08-.07-.06-.12-.14-.16-.23-.04-.09-.06-.18-.06-.27,0-.1.02-.19.05-.28.03-.08.09-.17.15-.23.07-.07.15-.12.24-.16.09-.03.15-.04.27-.05.09,0,.19.02.28.06.09.04.16.09.29.23.28.27.63.46,1.02.53.33.06.67.03.99-.08.07,0,.13-.03.2-.05.35-.15.65-.4.86-.72.21-.32.32-.69.32-1.07v-.14c0-.09.01-.19.05-.27.03-.09.09-.17.15-.24.07-.07.14-.12.23-.16.18-.07.38-.07.55,0,.09.04.17.09.23.16.07.07.12.15.15.24.03.09.05.18.05.36,0,.38.12.76.33,1.08s.52.57.87.71c.36.15.74.19,1.12.12.38-.07.72-.25,1.05-.57.27-.27.73-.27,1,0,.13.13.21.31.21.5s-.08.37-.26.55c-.27.28-.46.63-.53,1.02-.06.33-.03.67.08.99,0,.07.03.13.05.19.15.35.4.65.72.86.32.21.69.32,1.07.32h.14c.11,0,.19.01.28.05.09.03.17.08.23.15.07.07.12.15.16.23.04.09.06.18.06.27s-.02.19-.06.28Z'/%3E%3C/g%3E", | |
| 179 | + "fnc-curation" : " %3Ccircle fill='%23fff' cx='21' cy='8.51' r='3'/%3E%3Cg%3E%3Cpath d='m4.52,18.53c-.46-.63-1.17-1-2.02-1.03-1.38,0-2.5,1.12-2.5,2.5s1.12,2.5,2.5,2.5,2.5-1.12,2.5-2.5c0-.47-.13-.92-.39-1.32l-.1-.15Zm-2.02,2.47c-.55,0-1-.45-1-1s.45-1,1.04-1c.3,0,.57.15.76.4l.05.08c.1.16.15.33.15.52,0,.55-.45,1-1,1Z'/%3E%3Cpath d='m11.27,7.53c.14-.31.23-.67.23-1.04,0-1.38-1.12-2.5-2.5-2.5v.02c-1.38,0-2.5,1.12-2.5,2.5,0,.49.14.93.39,1.32.43.68,1.18,1.15,2.04,1.17h.07c.13,0,.27-.02.39-.04.84-.13,1.53-.68,1.88-1.43Z'/%3E%3Cpath d='m18,16.16c-.28-.78-.94-1.38-1.76-1.57-.19-.05-.39-.08-.58-.08-.13,0-.27.02-.39.04-.84.13-1.53.68-1.88,1.42-.14.31-.23.67-.23,1.04,0,1.38,1.12,2.5,2.5,2.5s2.5-1.12,2.5-2.5c0-.3-.06-.59-.16-.86h0Z'/%3E%3Cpath d='m21.5,5.51c-1.38,0-2.5,1.12-2.5,2.5,0,.35.07.69.22,1.01h0c.34.77,1.04,1.31,1.86,1.45.15.03.29.04.42.04,1.38,0,2.5-1.12,2.5-2.5s-1.12-2.5-2.5-2.5Zm0,3.5s-.1,0-.17-.02c-.33-.06-.61-.27-.75-.58h0c-.06-.13-.09-.26-.09-.4,0-.55.45-1,1-1s1,.45,1,1-.45,1-1,1Z'/%3E%3Crect x='1.84' y='12.41' width='7.62' height='1.5' transform='translate(-8.67 13.16) rotate(-66.77)'/%3E%3Crect x='12' y='9.18' width='1.5' height='5.14' transform='translate(-4.1 7.67) rotate(-29.03)'/%3E%3Crect x='17.04' y='11.64' width='3.67' height='1.5' transform='translate(-1.01 23.07) rotate(-61.53)'/%3E%3C/g%3E", | |
| 180 | + "fnc-badges" : "%3Cpath d='m17.72,2.21H5.72c-.41,0-.75.34-.75.75v8.15c0,.27.14.51.37.65l.66.39c-.65.99-1.03,2.16-1.03,3.42,0,3.5,2.91,6.35,6.49,6.35s6.49-2.85,6.49-6.35c0-1.16-.33-2.25-.89-3.19l1.04-.61c.23-.13.37-.38.37-.65V2.96c0-.41-.34-.75-.75-.75Zm-8.22,1.5h4.45v5.99c-.12-.05-.24-.09-.36-.13-.07-.02-.14-.05-.21-.08-.13-.04-.26-.07-.39-.1-.08-.02-.15-.04-.23-.06-.14-.03-.28-.04-.41-.06-.08-.01-.15-.03-.23-.03-.22-.02-.43-.03-.65-.03-.3,0-.6.03-.9.07-.06,0-.13.02-.19.03-.3.05-.59.11-.87.2,0,0,0,0,0,0V3.71Zm-3.02,0h1.52v6.48s-.03.03-.05.04c-.33.21-.63.44-.91.7-.02.02-.04.03-.05.04l-.5-.3V3.71Zm4.99,16.71c-2.75,0-4.99-2.18-4.99-4.85,0-1.27.51-2.41,1.33-3.28.11-.11.22-.21.33-.31.12-.11.25-.21.38-.31.11-.08.23-.16.35-.23.17-.1.34-.19.52-.27.07-.03.15-.07.22-.1.25-.1.5-.17.77-.23.12-.03.25-.04.37-.05.15-.02.3-.04.45-.04.16,0,.32-.01.47,0,.13,0,.26.02.39.04.24.03.48.07.72.13.15.04.29.08.44.13.11.04.22.08.32.13.22.1.44.21.64.34.02.02.05.03.08.04.24.16.46.34.67.54.07.07.14.15.21.23.81.86,1.31,2,1.31,3.25,0,2.68-2.24,4.85-4.99,4.85Zm4.04-9.81s-.03-.03-.05-.05V3.71h1.52v6.97l-.83.49s-.02-.02-.03-.03c-.19-.19-.39-.37-.61-.54Z'/%3E%3Ccircle fill='%23fff' cx='11.72' cy='15.96' r='3'/%3E", | |
| 181 | + "fnc-stuhome" : "%3Cpath d='M4 12.8278V21.9978H10V15.9978H14V21.9978H20V12.8278L20.59 13.4178L22 12.0078L20 10.0078L13.41 3.41781L12 2.00781L10.59 3.41781L4 10.0078L2 12.0078L3.41 13.4178L4 12.8278ZM6 10.8278L12 4.82781L18 10.8278V19.9978H16V15.9978C16 14.8978 15.1 13.9978 14 13.9978H10C8.9 13.9978 8 14.8978 8 15.9978V19.9978H6V10.8278Z' fill='%23FD882F'/%3E", | |
| 182 | + "fnc-comment" : "%3Cpath d='m2,19h14l6,4V4H2v15Zm2-13h16v13.26l-2.89-1.93c-.33-.22-.71-.34-1.11-.34H4V6Z'/%3E%3Crect x='6' y='8' width='12' height='2'/%3E%3Crect x='6' y='12' width='10' height='2'/%3E", | |
| 183 | +); | |
| 184 | + | |
| 185 | + | |
| 186 | +$fileIcons : ( | |
| 187 | + "file-pdf" : "%3E%3Cg %3E%3Cpath d='M13,2H6A2.006,2.006,0,0,0,4,4V20a2.006,2.006,0,0,0,2,2H18a2.006,2.006,0,0,0,2-2V9Z' fill='%23e34f3e'/%3E%3Cpath d='M13,2V8a.945.945,0,0,0,1,1h6' fill='%23bb1d0b'/%3E%3Cpath d='M9.2,11.2a1.884,1.884,0,0,0-.8-.2H6.7v4.2h.9V13.8h.8a1.884,1.884,0,0,0,.8-.2,1.205,1.205,0,0,0,.5-.5,1.854,1.854,0,0,0,.2-.7,1.854,1.854,0,0,0-.2-.7,1.205,1.205,0,0,0-.5-.5Zm-.3,1.6c-.1.1-.1.2-.3.3a.6.6,0,0,1-.4.1H7.6V11.8h.6c.2,0,.3,0,.4.1s.2.1.3.2a.367.367,0,0,1,.1.3A.6.6,0,0,1,8.9,12.8Z' fill='%23fff'/%3E%3Cpath d='M12.9,11.3a2.016,2.016,0,0,0-1.1-.3H10.3v4.2h1.5a2.016,2.016,0,0,0,1.1-.3,1.575,1.575,0,0,0,.7-.7,1.978,1.978,0,0,0,.2-1.1,3.6,3.6,0,0,0-.2-1.1A.988.988,0,0,0,12.9,11.3Zm0,2.6c-.1.2-.2.4-.4.4a1.483,1.483,0,0,1-.7.1h-.6V11.7h.6a1.483,1.483,0,0,1,.7.1.781.781,0,0,1,.4.4,1.949,1.949,0,0,1,.1.8A2.22,2.22,0,0,1,12.9,13.9Z' fill='%23fff'/%3E%3Cpath d='M17.3,11.7V11H14.5v4.2h.9V13.5h1.7v-.7H15.4V11.7Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A", | |
| 188 | + "file-hwp": "%3E%3Cg transform='translate(-24)'%3E%3Crect width='24' height='24' transform='translate(24)' fill='none'/%3E%3Cpath d='M37,2H30a2.006,2.006,0,0,0-2,2V20a2.006,2.006,0,0,0,2,2H42a2.006,2.006,0,0,0,2-2V9Z' fill='%23209ddf'/%3E%3Cpath d='M37,2V8a.945.945,0,0,0,1,1h6' fill='%23006e9e'/%3E%3Cpath d='M32.1,12.8H30.3V11h-.9v4.2h.9V13.5h1.8v1.7H33V11h-.9Z' fill='%23fff'/%3E%3Cpath d='M37.4,14h0l-.8-3h-.8L35,14h0l-.7-3h-1l1.2,4.2h.9l.8-2.8h0l.8,2.8h.9L39.1,11h-1Z' fill='%23fff'/%3E%3Cpath d='M42.4,11.7a1.205,1.205,0,0,0-.5-.5,1.884,1.884,0,0,0-.8-.2H39.4v4.2h.9V13.8H41a1.884,1.884,0,0,0,.8-.2,1.205,1.205,0,0,0,.5-.5,1.854,1.854,0,0,0,.2-.7,1.7,1.7,0,0,0-.1-.7Zm-.8,1.1c-.1.1-.1.2-.3.3a.6.6,0,0,1-.4.1h-.6V11.8h.6c.2,0,.3,0,.4.1s.2.1.3.2.1.2.1.4S41.6,12.7,41.6,12.8Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A", | |
| 189 | + "file-doc": "%3E%3Cg transform='translate(-48)'%3E%3Crect width='24' height='24' transform='translate(48)' fill='none'/%3E%3Cpath d='M61,2H54a2.006,2.006,0,0,0-2,2V20a2.006,2.006,0,0,0,2,2H66a2.006,2.006,0,0,0,2-2V9Z' fill='%23295498'/%3E%3Cpath d='M61,2V8a.945.945,0,0,0,1,1h6' fill='%23002863'/%3E%3Cpath d='M56.6,11.3a2.016,2.016,0,0,0-1.1-.3H54v4.2h1.5a2.016,2.016,0,0,0,1.1-.3,2.336,2.336,0,0,0,.7-.7,1.978,1.978,0,0,0,.2-1.1,3.6,3.6,0,0,0-.2-1.1A2.336,2.336,0,0,0,56.6,11.3ZM56.5,14c-.1.2-.2.4-.4.4a1.483,1.483,0,0,1-.7.1h-.6V11.8h.6a1.483,1.483,0,0,1,.7.1.781.781,0,0,1,.4.4,1.949,1.949,0,0,1,.1.8A1.337,1.337,0,0,1,56.5,14Z' fill='%23fff'/%3E%3Cpath d='M60.9,11.3a1.817,1.817,0,0,0-2,0,1.853,1.853,0,0,0-.7.8,2.133,2.133,0,0,0-.3,1.2,2.663,2.663,0,0,0,.3,1.2,2.7,2.7,0,0,0,.7.8,1.817,1.817,0,0,0,2,0,1.853,1.853,0,0,0,.7-.8,2.55,2.55,0,0,0,0-2.4C61.4,11.7,61.2,11.4,60.9,11.3Zm-.1,2.6a1,1,0,0,1-.4.5,1,1,0,0,1-1.2,0,1,1,0,0,1-.4-.5,1.949,1.949,0,0,1-.1-.8,1.949,1.949,0,0,1,.1-.8,1,1,0,0,1,.4-.5,1,1,0,0,1,1.2,0,1,1,0,0,1,.4.5,1.949,1.949,0,0,1,.1.8A1.949,1.949,0,0,1,60.8,13.9Z' fill='%23fff'/%3E%3Cpath d='M65,14.2c-.1.1-.2.2-.3.2a.6.6,0,0,1-.4.1,1.421,1.421,0,0,1-.6-.2,1,1,0,0,1-.4-.5,1.949,1.949,0,0,1-.1-.8,2.2,2.2,0,0,1,.1-.8,1,1,0,0,1,.4-.5,1.421,1.421,0,0,1,.6-.2c.2,0,.3,0,.4.1s.2.1.3.3l.2.4H66a1.135,1.135,0,0,0-.3-.8,2.651,2.651,0,0,0-.6-.5,2.92,2.92,0,0,0-.9-.2,1.689,1.689,0,0,0-1,.3,1.853,1.853,0,0,0-.7.8,2.133,2.133,0,0,0-.3,1.2,2.375,2.375,0,0,0,.3,1.2,1.853,1.853,0,0,0,.7.8,1.689,1.689,0,0,0,1,.3,2.388,2.388,0,0,0,.9-.2,1.024,1.024,0,0,0,.6-.5c.1-.2.2-.5.3-.7h-.9a.31.31,0,0,1-.1.2Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A", | |
| 190 | + "file-xls": "%3E%3Cg%3E%3Crect style='fill:none;' width='24' height='24'/%3E%3Cpath style='fill:%23008448;' d='M13,2H6C4.9,2,4,2.9,4,4v16 c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V9L13,2z'/%3E%3Cpath style='fill:%23006630;' d='M13,2v6c0,0.6,0.4,1,1,1h6' /%3E%3Cg%3E%3Cpath style='fill:%23FFFFFF;' d='M8.5,13.2L8.5,13.2l0.9-1.5h1l-1.3,2.1l1.3,2.1h-1l-0.9-1.5h0L7.7,16h-1L8,13.9l-1.3-2.1h1 L8.5,13.2z'/%3E%3Cpath style='fill:%23FFFFFF;' d='M10.9,11.8h0.9v3.5h1.8V16h-2.7V11.8z'/%3E%3Cpath style='fill:%23FFFFFF;' d='M15.7,12.4c-0.4,0-0.7,0.2-0.7,0.5c0,0.3,0.3,0.4,0.7,0.5l0.4,0.1c0.7,0.2,1.3,0.5,1.3,1.2 c0,0.8-0.6,1.3-1.6,1.3c-1,0-1.7-0.5-1.7-1.4h0.9c0,0.4,0.4,0.6,0.8,0.6c0.5,0,0.8-0.2,0.8-0.5c0-0.3-0.3-0.4-0.7-0.5l-0.5-0.1 c-0.7-0.2-1.2-0.5-1.2-1.2c0-0.8,0.7-1.3,1.6-1.3c0.9,0,1.6,0.5,1.6,1.3h-0.8C16.4,12.6,16.1,12.4,15.7,12.4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E" | |
| 191 | +); | |
| 192 | + | |
| 193 | + | |
| 194 | +@function str-replace($string, $search, $replace: '') { | |
| 195 | + $index: str-index($string, $search); | |
| 196 | + | |
| 197 | + @if $index { | |
| 198 | + @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace); | |
| 199 | + } | |
| 200 | + | |
| 201 | + @return $string; | |
| 202 | +} | |
| 203 | + | |
| 204 | +@function pathIcon($icon : map-get($icons,"ico-search"), $color : $color-black, $size : 24 ) { | |
| 205 | + $result: "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 " + $size + " " + $size + "' xml:space='preserve'%3E"; | |
| 206 | + $result: $result + "%3Cg fill='"+str-replace(''+ $color, '#', '%23')+"'%3E"; | |
| 207 | + $result: $result + $icon; | |
| 208 | + $result: $result + "%3C/g%3E%3C/svg%3E"; | |
| 209 | + @return $result; | |
| 210 | +} | |
| 211 | +// @function pathIcon($icon, $size: 24) { | |
| 212 | +// $result: "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 " + $size + " " + $size + "' xml:space='preserve'%3E"; | |
| 213 | +// $result: $result + "%3Cg fill='currentColor'%3E"; // SVG 내부에서 currentColor 사용 | |
| 214 | +// $result: $result + $icon; | |
| 215 | +// $result: $result + "%3C/g%3E%3C/svg%3E"; | |
| 216 | + | |
| 217 | +// @return $result; | |
| 218 | +// } | |
| 219 | + | |
| 220 | +@function pathImgIcon($icon : map-get($fileIcons, "file-pdf"), $size : 24) { | |
| 221 | + $result: "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 " + $size + " " + $size + "'"; | |
| 222 | + $result: $result + $icon; | |
| 223 | + @return $result; | |
| 224 | +} | |
| 225 | + | |
| 226 | +$icoHasEl: '.btn, .chip, .input', '.badge', '.ico-ox-o', '.ico-ox-x', '.tabs-nav-xsm', '[class*="ico-img-"]'; | |
| 227 | + | |
| 228 | +[class*="ico-"]:not(#{$icoHasEl}) { | |
| 229 | + display: inline-flex; | |
| 230 | + vertical-align: middle; | |
| 231 | + flex: 0 0 auto; | |
| 232 | + font-size:0; | |
| 233 | + position: relative; | |
| 234 | + width: $size-icon-md; | |
| 235 | + height: $size-icon-md; | |
| 236 | + &::before { | |
| 237 | + content: " "; | |
| 238 | + position: absolute; | |
| 239 | + inset: 0; | |
| 240 | + @include ico-set($color-icon-default-secondary, $size-icon-md); | |
| 241 | + mask-size: contain; | |
| 242 | + width: 100%; | |
| 243 | + height: 100%; | |
| 244 | + } | |
| 245 | + &.sm { | |
| 246 | + width: $size-icon-sm; | |
| 247 | + height: $size-icon-sm; | |
| 248 | + } | |
| 249 | + &.lg { | |
| 250 | + width: $size-icon-lg; | |
| 251 | + height: $size-icon-lg; | |
| 252 | + } | |
| 253 | + @each $cls, $icon in $icons { | |
| 254 | + &.#{$cls} { | |
| 255 | + &::before { | |
| 256 | + mask-image: url(pathIcon(map-get($icons,#{$cls}))); | |
| 257 | + } | |
| 258 | + } | |
| 259 | + } | |
| 260 | + &.primary, | |
| 261 | + &.spot { | |
| 262 | + &::before { | |
| 263 | + background-color: $color-icon-brand-primary; | |
| 264 | + } | |
| 265 | + | |
| 266 | + } | |
| 267 | + &.secondary, | |
| 268 | + &.spot2 { | |
| 269 | + &::before { | |
| 270 | + background-color: $color-icon-brand-secondary; | |
| 271 | + } | |
| 272 | + } | |
| 273 | + &.accent, | |
| 274 | + &.spot3 { | |
| 275 | + &::before { | |
| 276 | + background-color: $color-icon-brand-accent; | |
| 277 | + } | |
| 278 | + } | |
| 279 | + &.overlay{ | |
| 280 | + &::before { | |
| 281 | + background-color: $color-icon-brand-primary-inverse; | |
| 282 | + } | |
| 283 | + } | |
| 284 | + &.white { | |
| 285 | + &::before { | |
| 286 | + background-color: $color-background-default-primary; | |
| 287 | + } | |
| 288 | + } | |
| 289 | + &.black { | |
| 290 | + &::before { | |
| 291 | + background-color: $color-black; | |
| 292 | + } | |
| 293 | + } | |
| 294 | + &.success { | |
| 295 | + &::before { | |
| 296 | + background-color: $color-icon-success-primary; | |
| 297 | + } | |
| 298 | + } | |
| 299 | + &.warning { | |
| 300 | + &::before { | |
| 301 | + background-color: $color-icon-warning-primary; | |
| 302 | + } | |
| 303 | + } | |
| 304 | + &.info { | |
| 305 | + &::before { | |
| 306 | + background-color: $color-icon-info-primary; | |
| 307 | + } | |
| 308 | + } | |
| 309 | + &.danger{ | |
| 310 | + &::before { | |
| 311 | + background-color: $color-icon-danger-primary; | |
| 312 | + } | |
| 313 | + } | |
| 314 | +} | |
| 315 | +#{$icoHasEl}:has(> i[class*="ico-"]) { | |
| 316 | + gap: $spacing-xsm; | |
| 317 | + i, | |
| 318 | + &:hover i { | |
| 319 | + &::before { | |
| 320 | + background-color: $color-icon-default-secondary; | |
| 321 | + } | |
| 322 | + | |
| 323 | + } | |
| 324 | + &.primary, &.spot, &.cta, &.overlay{ | |
| 325 | + i { | |
| 326 | + &::before { | |
| 327 | + background-color: $color-icon-brand-primary-inverse; | |
| 328 | + } | |
| 329 | + } | |
| 330 | + } | |
| 331 | + &.secondary, &.spot2 { | |
| 332 | + i { | |
| 333 | + &::before { | |
| 334 | + background-color: $color-icon-brand-primary; | |
| 335 | + } | |
| 336 | + } | |
| 337 | + } | |
| 338 | + &.danger , &.spot3 { | |
| 339 | + i { | |
| 340 | + &::before { | |
| 341 | + background-color: $color-icon-default-secondary; | |
| 342 | + } | |
| 343 | + } | |
| 344 | + } | |
| 345 | + &:disabled, &.disabled { | |
| 346 | + i { | |
| 347 | + &::before { | |
| 348 | + background-color: $color-icon-disabled-primary; | |
| 349 | + } | |
| 350 | + } | |
| 351 | + } | |
| 352 | + &.toggle { | |
| 353 | + i { | |
| 354 | + &::before { | |
| 355 | + background-color: $color-icon-default-primary-inverse; | |
| 356 | + } | |
| 357 | + } | |
| 358 | + } | |
| 359 | +} | |
| 360 | + | |
| 361 | +//file | |
| 362 | +[class^=ico-file] { | |
| 363 | + @each $cls, $icon in $fileIcons { | |
| 364 | + &.ico-#{$cls} { | |
| 365 | + &::before { | |
| 366 | + width: 2.4rem; | |
| 367 | + height: 2.4rem; | |
| 368 | + background-image: url(pathImgIcon(map-get($fileIcons,#{$cls}))); | |
| 369 | + background-size: 100% 100%; | |
| 370 | + background-color: transparent; | |
| 371 | + } | |
| 372 | + } | |
| 373 | + } | |
| 374 | +} | |
| 375 | + | |
| 376 | +.ico-group { | |
| 377 | + @extend .ico-layer; | |
| 378 | +} | |
| 379 | +.ico-curation { | |
| 380 | + @extend .ico-chart; | |
| 381 | +} | |
| 382 | +.ico-thumbnail { | |
| 383 | + @extend .ico-app; | |
| 384 | +} | |
| 385 | +.ico-list { | |
| 386 | + @extend .ico-menu; | |
| 387 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/component/_label.scss
... | ... | @@ -0,0 +1,233 @@ |
| 1 | +/* badge */ | |
| 2 | +*:has(> .badge) { | |
| 3 | + position: relative; | |
| 4 | +} | |
| 5 | +.badge { | |
| 6 | + position: absolute; | |
| 7 | + top: 0; | |
| 8 | + right: 0; | |
| 9 | + transform: translate(50%, -20%); | |
| 10 | + display:inline-flex; | |
| 11 | + justify-content: center; | |
| 12 | + align-items: center; | |
| 13 | + min-width: 2rem; | |
| 14 | + height: 2rem; | |
| 15 | + padding: 0 0.6rem; | |
| 16 | + border-radius: 1rem; | |
| 17 | + background-color: $color-background-brand-primary-inverse; | |
| 18 | + color:$color-font-default-primary-inverse; | |
| 19 | + @include typo('body-sm'); | |
| 20 | + line-height: 1; | |
| 21 | + vertical-align: middle; | |
| 22 | + &[class*="ico-"] { | |
| 23 | + justify-content: flex-start; | |
| 24 | + width: 2rem; | |
| 25 | + padding: 0; | |
| 26 | + overflow: hidden; | |
| 27 | + font-size:0; | |
| 28 | + &::before { | |
| 29 | + content: ''; | |
| 30 | + position: absolute; | |
| 31 | + inset: 50%; | |
| 32 | + flex: 0 0 auto; | |
| 33 | + @include ico-set($color-icon-default-primary-inverse, $size-icon-sm); | |
| 34 | + transform: translate(-50%, -50%); | |
| 35 | + } | |
| 36 | + @each $cls, $icon in $icons { | |
| 37 | + &.#{$cls}::before { | |
| 38 | + mask-image: url(pathIcon(map-get($icons,#{$cls}))); | |
| 39 | + } | |
| 40 | + } | |
| 41 | + } | |
| 42 | + &.min { | |
| 43 | + bottom: auto; | |
| 44 | + justify-content: flex-start; | |
| 45 | + min-width: auto; | |
| 46 | + width: $spacing-xsm; | |
| 47 | + height: $spacing-xsm; | |
| 48 | + padding: 0 0 0 $spacing-xsm; | |
| 49 | + overflow: hidden; | |
| 50 | + background-color: $color-background-brand-accent-inverse; | |
| 51 | + } | |
| 52 | + $badges: ('blue', $color-background-info-primary-inverse), ('green', $color-background-success-primary-inverse), ('orange', $color-background-warning-primary-inverse); | |
| 53 | + @each $badge in $badges{ | |
| 54 | + &.#{nth($badge, 1)} { | |
| 55 | + background-color: #{nth($badge, 2)}; | |
| 56 | + color: #fff; | |
| 57 | + } | |
| 58 | + } | |
| 59 | +} | |
| 60 | + | |
| 61 | +/* label */ | |
| 62 | +.label-area { | |
| 63 | + display:flex; | |
| 64 | + flex-wrap: wrap; | |
| 65 | + gap: $spacing-2xsm; | |
| 66 | + &:has(> i[class*=ico-]) { | |
| 67 | + gap: $spacing-2xsm; | |
| 68 | + } | |
| 69 | + .checkradio { | |
| 70 | + margin-right:0; | |
| 71 | + } | |
| 72 | + & + .txt-area { | |
| 73 | + margin-top: $spacing-xsm; | |
| 74 | + } | |
| 75 | +} | |
| 76 | +$labels: | |
| 77 | +('blue', $color-background-info-primary, $color-font-info-primary, $color-icon-info-primary), | |
| 78 | +('info', $color-background-info-primary, $color-font-info-primary, $color-icon-info-primary), | |
| 79 | +('green', $color-background-success-primary, $color-font-success-primary, $color-icon-success-primary), | |
| 80 | +('success', $color-background-success-primary, $color-font-success-primary, $color-icon-success-primary), | |
| 81 | +('yellow', $color-background-warning-primary, $color-font-warning-primary, $color-icon-warning-primary), | |
| 82 | +('warning', $color-background-warning-primary, $color-font-warning-primary, $color-icon-warning-primary), | |
| 83 | +('red', $color-background-danger-primary, $color-font-danger-primary, $color-icon-danger-primary), | |
| 84 | +('danger', $color-background-danger-primary, $color-font-danger-primary, $color-icon-danger-primary), | |
| 85 | +('primary', $color-background-brand-primary, $color-font-brand-primary, $color-icon-brand-primary), | |
| 86 | +('secondary', $color-background-brand-secondary, $color-font-brand-secondary, $color-icon-brand-secondary), | |
| 87 | +('accent', $color-background-brand-accent, $color-font-brand-accent, $color-icon-brand-accent), | |
| 88 | +('primary-inverse', $color-background-brand-primary-inverse, $color-font-default-primary-inverse, $color-icon-default-primary-inverse), | |
| 89 | +('secondary-inverse', $color-background-brand-secondary-inverse, $color-font-default-primary-inverse, $color-icon-default-primary-inverse), | |
| 90 | +('accent-inverse', $color-background-brand-accent-inverse, $color-font-default-primary-inverse, $color-icon-default-primary-inverse); | |
| 91 | +.label { | |
| 92 | + display: inline-flex; | |
| 93 | + height: 2.4rem; | |
| 94 | + padding: 0 .8rem; | |
| 95 | + text-align: center; | |
| 96 | + justify-content: center; | |
| 97 | + align-items: center; | |
| 98 | + box-sizing: border-box; | |
| 99 | + @include typo('label-sm'); | |
| 100 | + font-weight: $size-font-weight-lg; | |
| 101 | + background-color: $color-background-default-tertiary; | |
| 102 | + color: $color-font-default-secondary; | |
| 103 | + vertical-align: middle; | |
| 104 | + gap: $spacing-2xsm; | |
| 105 | + border-radius: $radius-xsm; | |
| 106 | + @each $label in $labels{ | |
| 107 | + $hoverC: (#{nth($label, 2)}); | |
| 108 | + &.#{nth($label,1)} { | |
| 109 | + background-color: #{nth($label, 2)}; | |
| 110 | + color: #{nth($label, 3)}; | |
| 111 | + i { | |
| 112 | + &::before { | |
| 113 | + background-color: #{nth($label, 4)} !important; | |
| 114 | + } | |
| 115 | + } | |
| 116 | + } | |
| 117 | + } | |
| 118 | + @at-root a.label, button.label { | |
| 119 | + &:hover { | |
| 120 | + filter: brightness(95%); | |
| 121 | + } | |
| 122 | + } | |
| 123 | + &.sm { | |
| 124 | + height: 2rem; | |
| 125 | + @include typo('label-xsm'); | |
| 126 | + padding:0 .4em; | |
| 127 | + } | |
| 128 | + &.lg { | |
| 129 | + height: 3.2rem; | |
| 130 | + @include typo('label-md'); | |
| 131 | + padding:0 1.2rem; | |
| 132 | + } | |
| 133 | + &.num { | |
| 134 | + background-color: $color-background-brand-primary; | |
| 135 | + color: $color-font-brand-primary; | |
| 136 | + font-weight: 700; | |
| 137 | + min-width: 2.4rem; | |
| 138 | + justify-content: center; | |
| 139 | + @each $label in $labels{ | |
| 140 | + &.#{nth($label,1)} { | |
| 141 | + background-color: #{nth($label, 2)}; | |
| 142 | + color: #{nth($label, 3)}; | |
| 143 | + } | |
| 144 | + } | |
| 145 | + &.lg { | |
| 146 | + min-width: 3.2rem; | |
| 147 | + padding:0 0.8rem; | |
| 148 | + } | |
| 149 | + } | |
| 150 | + &-state { | |
| 151 | + position: relative; | |
| 152 | + display: inline-flex; | |
| 153 | + padding-left: 1rem; | |
| 154 | + &::before { | |
| 155 | + content: ""; | |
| 156 | + position: absolute; | |
| 157 | + left:0; | |
| 158 | + top:50%; | |
| 159 | + width: 0.6rem; | |
| 160 | + height: 0.6rem; | |
| 161 | + border-radius: 50%; | |
| 162 | + margin-top: -0.3rem; | |
| 163 | + background-color: $color-gray40; | |
| 164 | + } | |
| 165 | + @each $label in $labels{ | |
| 166 | + &.#{nth($label,1)} { | |
| 167 | + // background-color: #{nth($label, 2)}; | |
| 168 | + color: #{nth($label, 3)}; | |
| 169 | + &::before { | |
| 170 | + background-color: #{nth($label, 3)}; | |
| 171 | + } | |
| 172 | + } | |
| 173 | + } | |
| 174 | + @at-root button.label-state, a.label-state{ | |
| 175 | + text-decoration: underline; | |
| 176 | + &:hover { | |
| 177 | + filter: brightness(95%); | |
| 178 | + } | |
| 179 | + } | |
| 180 | + } | |
| 181 | + &.round { | |
| 182 | + border-radius: 2em; | |
| 183 | + } | |
| 184 | + &.line { | |
| 185 | + background-color: $color-transparent; | |
| 186 | + border: $size-stroke-xsm solid $color-stroke-default-tertiary; | |
| 187 | + } | |
| 188 | + &-mark { | |
| 189 | + display: inline-flex; | |
| 190 | + height: 2.4rem; | |
| 191 | + padding: 0 .6rem; | |
| 192 | + text-align: center; | |
| 193 | + justify-content: center; | |
| 194 | + align-items: center; | |
| 195 | + @include typo('label-sm'); | |
| 196 | + font-weight: $size-font-weight-lg; | |
| 197 | + border:$size-stroke-xsm solid $color-stroke-default-primary; | |
| 198 | + color: $color-font-default-primary; | |
| 199 | + vertical-align: middle; | |
| 200 | + gap: $spacing-2xsm; | |
| 201 | + border-radius: $radius-xsm; | |
| 202 | + &.info { | |
| 203 | + border-color: $color-stroke-info-primary; | |
| 204 | + color:$color-font-info-primary; | |
| 205 | + } | |
| 206 | + &.accent { | |
| 207 | + border-color: $color-stroke-brand-accent; | |
| 208 | + color:$color-font-brand-accent; | |
| 209 | + } | |
| 210 | + &.lg { | |
| 211 | + height: 3.2rem; | |
| 212 | + padding:0 $spacing-sm; | |
| 213 | + @include typo('label-md'); | |
| 214 | + border-radius: $radius-xsm; | |
| 215 | + } | |
| 216 | + } | |
| 217 | +} | |
| 218 | +.label-num-img { | |
| 219 | + display: inline-flex; | |
| 220 | + width: 2.4rem; | |
| 221 | + aspect-ratio: 1; | |
| 222 | + font-size:0; | |
| 223 | + background-size:contain; | |
| 224 | + vertical-align: middle; | |
| 225 | + @for $num from 1 through 3 { | |
| 226 | + &.num#{$num} { | |
| 227 | + background-image: url($url-img + 'common/ico-img/ico-img-rank#{$num}.svg'); | |
| 228 | + } | |
| 229 | + } | |
| 230 | + &.lg { | |
| 231 | + width: 3.2rem; | |
| 232 | + } | |
| 233 | +} |
+++ resources/front/site/SITE_00000/css/common/component/_list.scss
... | ... | @@ -0,0 +1,921 @@ |
| 1 | +.thumb-list { | |
| 2 | + display: grid; | |
| 3 | + grid-template-columns: repeat(4, 1fr); | |
| 4 | + gap: $spacing-2xlg $spacing-md; | |
| 5 | + li { | |
| 6 | + position: relative; | |
| 7 | + min-width: 0; | |
| 8 | + &:hover { | |
| 9 | + .thumb-fnc-r { | |
| 10 | + .btn-ico { | |
| 11 | + opacity: 1; | |
| 12 | + visibility: visible; | |
| 13 | + transition: 0.6s; | |
| 14 | + } | |
| 15 | + } | |
| 16 | + } | |
| 17 | + } | |
| 18 | + &.sm { | |
| 19 | + gap: $spacing-xsm; | |
| 20 | + li { | |
| 21 | + width: calc((100% - 1.6rem * 2) / 3); | |
| 22 | + } | |
| 23 | + } | |
| 24 | + &.col3 { | |
| 25 | + grid-template-columns: repeat(3, 1fr); | |
| 26 | + } | |
| 27 | +} | |
| 28 | + | |
| 29 | +.thumb-sm-list { | |
| 30 | + gap: $spacing-xsm; | |
| 31 | + display: flex; | |
| 32 | + flex-wrap: wrap; | |
| 33 | + li { | |
| 34 | + position: relative; | |
| 35 | + width: calc((100% - 1.6rem * 2) / 3); | |
| 36 | + } | |
| 37 | + .thumb-txt-area { | |
| 38 | + p { | |
| 39 | + font-size: $size-font-sm; | |
| 40 | + } | |
| 41 | + strong, | |
| 42 | + cite { | |
| 43 | + margin-top: $spacing-2xsm; | |
| 44 | + } | |
| 45 | + } | |
| 46 | + &.col4 { | |
| 47 | + li { | |
| 48 | + width: calc((100% - 1.6rem * 3) / 4); | |
| 49 | + } | |
| 50 | + } | |
| 51 | +} | |
| 52 | + | |
| 53 | +.thumb-block-list { | |
| 54 | + li { | |
| 55 | + position: relative; | |
| 56 | + & ~ li { | |
| 57 | + margin-top: $spacing-md; | |
| 58 | + } | |
| 59 | + } | |
| 60 | +} | |
| 61 | + | |
| 62 | +.thumb-h-list { | |
| 63 | + display: flex; | |
| 64 | + flex-direction: column; | |
| 65 | + gap: $spacing-md; | |
| 66 | + .item, | |
| 67 | + li { | |
| 68 | + position: relative; | |
| 69 | + display: flex; | |
| 70 | + gap: $spacing-xsm; | |
| 71 | + align-items: center; | |
| 72 | + min-width: 0; | |
| 73 | + overflow: hidden; | |
| 74 | + .thumb-img-area { | |
| 75 | + position: relative; | |
| 76 | + width: 12.8rem; | |
| 77 | + figure { | |
| 78 | + border-radius: $radius-sm; | |
| 79 | + } | |
| 80 | + .label-area { | |
| 81 | + position: absolute; | |
| 82 | + left: 4px; | |
| 83 | + top: 4px; | |
| 84 | + z-index: 1; | |
| 85 | + white-space: nowrap; | |
| 86 | + } | |
| 87 | + } | |
| 88 | + .thumb-txt-area { | |
| 89 | + flex: 1; | |
| 90 | + margin-top: 0; | |
| 91 | + min-width: 0; | |
| 92 | + p { | |
| 93 | + font-size: 1.4rem; | |
| 94 | + white-space: normal; | |
| 95 | + word-break: break-all; | |
| 96 | + @include ellipsis(2); | |
| 97 | + } | |
| 98 | + strong, | |
| 99 | + cite { | |
| 100 | + @include typo('body-sm'); | |
| 101 | + } | |
| 102 | + } | |
| 103 | + } | |
| 104 | +} | |
| 105 | + | |
| 106 | +.thumb-item-list { | |
| 107 | + display: flex; | |
| 108 | + flex-direction: column; | |
| 109 | + gap: $spacing-xsm; | |
| 110 | + .item-cont, | |
| 111 | + li { | |
| 112 | + position: relative; | |
| 113 | + display: flex; | |
| 114 | + flex-direction: column; | |
| 115 | + min-width: 0; | |
| 116 | + overflow: hidden; | |
| 117 | + border:1px solid $color-gray30; | |
| 118 | + border-radius: $radius-sm; | |
| 119 | + padding:0.8rem; | |
| 120 | + } | |
| 121 | + .item { | |
| 122 | + position: relative; | |
| 123 | + display: flex; | |
| 124 | + gap: 4px 12px; | |
| 125 | + align-items: center; | |
| 126 | + min-width: 0; | |
| 127 | + overflow: hidden; | |
| 128 | + & ~ .item { | |
| 129 | + margin-top: $spacing-xsm; | |
| 130 | + } | |
| 131 | + .thumb-img-area { | |
| 132 | + position: relative; | |
| 133 | + width: 12.8rem; | |
| 134 | + figure { | |
| 135 | + border-radius: $radius-sm; | |
| 136 | + } | |
| 137 | + .label-area { | |
| 138 | + position: absolute; | |
| 139 | + left: 4px; | |
| 140 | + top: 4px; | |
| 141 | + z-index: 1; | |
| 142 | + white-space: nowrap; | |
| 143 | + } | |
| 144 | + } | |
| 145 | + .thumb-txt-area { | |
| 146 | + flex: 1; | |
| 147 | + margin-top: 0; | |
| 148 | + min-width: 0; | |
| 149 | + p { | |
| 150 | + font-size: 1.4rem; | |
| 151 | + white-space: normal; | |
| 152 | + word-break: break-all; | |
| 153 | + @include ellipsis(2); | |
| 154 | + } | |
| 155 | + strong, | |
| 156 | + cite { | |
| 157 | + @include typo('body-sm'); | |
| 158 | + } | |
| 159 | + } | |
| 160 | + } | |
| 161 | +} | |
| 162 | + | |
| 163 | +.thumb-img-area { | |
| 164 | + position: relative; | |
| 165 | + overflow: hidden; | |
| 166 | + figure { | |
| 167 | + @include img-size; | |
| 168 | + } | |
| 169 | +} | |
| 170 | + | |
| 171 | +.link-full:hover ~ .thumb-img-area { | |
| 172 | + figure { | |
| 173 | + img { | |
| 174 | + top: -3%; | |
| 175 | + left: -3%; | |
| 176 | + width: 106%; | |
| 177 | + height: 106%; | |
| 178 | + } | |
| 179 | + } | |
| 180 | +} | |
| 181 | + | |
| 182 | +.thumb-txt-area { | |
| 183 | + position: relative; | |
| 184 | + margin-top: $spacing-md; | |
| 185 | + p { | |
| 186 | + @include ellipsis(1); | |
| 187 | + word-break: break-all; | |
| 188 | + @include typo('body-lg'); | |
| 189 | + } | |
| 190 | + .info { | |
| 191 | + margin-top: $spacing-xsm; | |
| 192 | + display: flex; | |
| 193 | + align-items: center; | |
| 194 | + gap: $spacing-xsm; | |
| 195 | + span { | |
| 196 | + display: flex; | |
| 197 | + gap: $spacing-2xsm; | |
| 198 | + font-size: 1.2rem; | |
| 199 | + color: $color-gray50; | |
| 200 | + * { | |
| 201 | + margin:0; | |
| 202 | + } | |
| 203 | + // &::after { | |
| 204 | + // content: " "; | |
| 205 | + // display: inline-block; | |
| 206 | + // vertical-align: middle; | |
| 207 | + // width: 0.1rem; | |
| 208 | + // height: 1rem; | |
| 209 | + // margin: 0 $spacing-xsm; | |
| 210 | + // background-color: $color-gray50; | |
| 211 | + // } | |
| 212 | + &:last-child { | |
| 213 | + &::after { | |
| 214 | + display: none; | |
| 215 | + } | |
| 216 | + } | |
| 217 | + } | |
| 218 | + } | |
| 219 | + strong, | |
| 220 | + cite { | |
| 221 | + margin-top: $spacing-xsm; | |
| 222 | + display: block; | |
| 223 | + font-size: 1.2rem; | |
| 224 | + color: $color-gray50; | |
| 225 | + @include ellipsis(1); | |
| 226 | + } | |
| 227 | + &.sm { | |
| 228 | + margin-top: $spacing-xsm; | |
| 229 | + strong, | |
| 230 | + cite { | |
| 231 | + margin-top: $spacing-2xsm; | |
| 232 | + } | |
| 233 | + } | |
| 234 | + .etc-area { | |
| 235 | + margin-top: $spacing-2xsm; | |
| 236 | + display: flex; | |
| 237 | + flex-wrap: wrap; | |
| 238 | + .label { | |
| 239 | + margin-right: $spacing-2xsm; | |
| 240 | + } | |
| 241 | + button { | |
| 242 | + z-index: 1; | |
| 243 | + .label { | |
| 244 | + &:hover { | |
| 245 | + font-weight: $size-font-weight-xlg; | |
| 246 | + } | |
| 247 | + } | |
| 248 | + } | |
| 249 | + } | |
| 250 | + .l-area { | |
| 251 | + padding-right: $spacing-lg; | |
| 252 | + } | |
| 253 | + .thumb-txt-fnc { | |
| 254 | + position: absolute; | |
| 255 | + top: 0; | |
| 256 | + right: 0; | |
| 257 | + } | |
| 258 | + i { | |
| 259 | + margin-right: $spacing-2xsm; | |
| 260 | + } | |
| 261 | + | |
| 262 | + &:has(.etc-fnc-area) { | |
| 263 | + padding-right:2.4rem; | |
| 264 | + } | |
| 265 | +} | |
| 266 | + | |
| 267 | +.thumb-swiper { | |
| 268 | + position: relative; | |
| 269 | + padding-left: 2.4rem; | |
| 270 | + padding-right: 2.4rem; | |
| 271 | + box-sizing: border-box; | |
| 272 | + margin-left: -2.4rem; | |
| 273 | + margin-right: -2.4rem; | |
| 274 | + &::before, | |
| 275 | + &::after { | |
| 276 | + content: " "; | |
| 277 | + position: absolute; | |
| 278 | + left: 0; | |
| 279 | + top: 0; | |
| 280 | + background: $color-white; | |
| 281 | + width: 2.4rem; | |
| 282 | + height: 100%; | |
| 283 | + z-index: 2; | |
| 284 | + } | |
| 285 | + &::after { | |
| 286 | + left: auto; | |
| 287 | + right: 0; | |
| 288 | + } | |
| 289 | +} | |
| 290 | + | |
| 291 | +.thumb-fnc { | |
| 292 | + &-l, | |
| 293 | + &-r { | |
| 294 | + position: absolute; | |
| 295 | + top: 0.8rem; | |
| 296 | + z-index: 2; | |
| 297 | + } | |
| 298 | + &-l { | |
| 299 | + left: 0.8rem; | |
| 300 | + } | |
| 301 | + &-r { | |
| 302 | + right: 0.8rem; | |
| 303 | + .btn-ico { | |
| 304 | + opacity: 0; | |
| 305 | + visibility: hidden; | |
| 306 | + } | |
| 307 | + } | |
| 308 | +} | |
| 309 | +li { | |
| 310 | + &:hover { | |
| 311 | + .thumb-fnc-hover { | |
| 312 | + display: flex; | |
| 313 | + } | |
| 314 | + } | |
| 315 | +} | |
| 316 | +.thumb-fnc-hover { | |
| 317 | + display: none; | |
| 318 | + position: absolute; | |
| 319 | + top: 0; | |
| 320 | + left: 0; | |
| 321 | + right: 0; | |
| 322 | + bottom: 0; | |
| 323 | + align-items: center; | |
| 324 | + justify-content: center; | |
| 325 | + background-color: rgba(0, 0, 0, 0.4); | |
| 326 | + gap: $spacing-2xsm; | |
| 327 | + .round.bk { | |
| 328 | + background-color: rgba(0, 0, 0, 0.9); | |
| 329 | + } | |
| 330 | +} | |
| 331 | + | |
| 332 | +/* item */ | |
| 333 | +//item-info | |
| 334 | +.item-info { | |
| 335 | + position: relative; | |
| 336 | + display: flex; | |
| 337 | + min-width: 0; | |
| 338 | + gap:$spacing-md; | |
| 339 | + align-items: center; | |
| 340 | + .img-area { | |
| 341 | + width: 18rem; | |
| 342 | + figure { | |
| 343 | + display:block; | |
| 344 | + @include img-size; | |
| 345 | + border-radius: $radius-xsm; | |
| 346 | + border:.1rem solid $color-gray30; | |
| 347 | + background-color: $color-gray20; | |
| 348 | + img { | |
| 349 | + object-fit: cover; | |
| 350 | + width: 100% !important; | |
| 351 | + height:100% !important; | |
| 352 | + } | |
| 353 | + } | |
| 354 | + } | |
| 355 | + .lnk-full { | |
| 356 | + &:hover ~ .txt-area { | |
| 357 | + .editor-cont { | |
| 358 | + text-decoration: underline; | |
| 359 | + } | |
| 360 | + } | |
| 361 | + } | |
| 362 | + .txt-area { | |
| 363 | + display: flex; | |
| 364 | + flex-direction: column; | |
| 365 | + flex:1; | |
| 366 | + min-width: 0; | |
| 367 | + gap: $spacing-2xsm; | |
| 368 | + } | |
| 369 | + .editor-cont { | |
| 370 | + @include typo('body-lg'); | |
| 371 | + @include ellipsis(1); | |
| 372 | + @include editor-cont; | |
| 373 | + } | |
| 374 | + .info { | |
| 375 | + display: flex; | |
| 376 | + align-items: center; | |
| 377 | + gap:$spacing-xsm; | |
| 378 | + margin-top:$spacing-2xsm; | |
| 379 | + @include typo('body-sm'); | |
| 380 | + } | |
| 381 | + .info-step { | |
| 382 | + margin-top:$spacing-2xsm; | |
| 383 | + } | |
| 384 | + .item-fnc { | |
| 385 | + margin-top:1.2rem; | |
| 386 | + } | |
| 387 | + @at-root .item-info + .item-info { | |
| 388 | + border-top:.1rem solid $color-gray20; | |
| 389 | + margin-top:$spacing-md; | |
| 390 | + padding-top:$spacing-md; | |
| 391 | + } | |
| 392 | + .editor-cont { | |
| 393 | + .editor-img-math { | |
| 394 | + vertical-align: middle; | |
| 395 | + max-width: 100%; | |
| 396 | + max-height: 2em; | |
| 397 | + } | |
| 398 | + } | |
| 399 | +} | |
| 400 | +.info-step { | |
| 401 | + display: flex; | |
| 402 | + align-items: center; | |
| 403 | + gap: $spacing-2xsm; | |
| 404 | + margin-top:$spacing-2xsm; | |
| 405 | + @include typo('body-sm'); | |
| 406 | + span, | |
| 407 | + a { | |
| 408 | + &::before { | |
| 409 | + content: " "; | |
| 410 | + display:inline-block; | |
| 411 | + vertical-align: middle; | |
| 412 | + width: 0; | |
| 413 | + height: 0; | |
| 414 | + border-width: 3px 0 3px 4px; | |
| 415 | + border-color: transparent transparent transparent $color-gray40; | |
| 416 | + border-style: solid; | |
| 417 | + margin-right: $spacing-2xsm; | |
| 418 | + } | |
| 419 | + &:first-child { | |
| 420 | + &::before { | |
| 421 | + display: none; | |
| 422 | + } | |
| 423 | + } | |
| 424 | + } | |
| 425 | +} | |
| 426 | +.btn-toggle { | |
| 427 | + &:before { | |
| 428 | + transition: all .5s; | |
| 429 | + } | |
| 430 | +} | |
| 431 | +@keyframes beat { | |
| 432 | + 0% { | |
| 433 | + transform: scale(1); | |
| 434 | + } | |
| 435 | + 50% { | |
| 436 | + transform: scale(1.5); | |
| 437 | + } | |
| 438 | + 100% { | |
| 439 | + transform: scale(1); | |
| 440 | + } | |
| 441 | +} | |
| 442 | +.btn-toggle.is-active { | |
| 443 | + &.btn-ico.ico-favorite { | |
| 444 | + overflow:visible; | |
| 445 | + &::before { | |
| 446 | + animation: beat .5s; | |
| 447 | + background-image: url(pathIcon(map-get($icons, 'ico-favorite-active'), $color-red50)); | |
| 448 | + } | |
| 449 | + } | |
| 450 | +} | |
| 451 | +.btn-toggle-favorite { | |
| 452 | + overflow:visible; | |
| 453 | + &.is-active, | |
| 454 | + &.is-active:hover { | |
| 455 | + &::before { | |
| 456 | + // animation: beat .5s; | |
| 457 | + background-image: url(pathIcon(map-get($icons, 'ico-favorite-active'), $color-red50)); | |
| 458 | + } | |
| 459 | + } | |
| 460 | +} | |
| 461 | + | |
| 462 | +@keyframes refresh { | |
| 463 | + 0% { | |
| 464 | + transform: rotate(0); | |
| 465 | + } | |
| 466 | + 100% { | |
| 467 | + transform: rotate(360deg); | |
| 468 | + } | |
| 469 | +} | |
| 470 | +.btn.btn-refresh { | |
| 471 | + &.is-refresh { | |
| 472 | + .ico-refresh { | |
| 473 | + animation: refresh 1s linear infinite; | |
| 474 | + } | |
| 475 | + } | |
| 476 | +} | |
| 477 | + | |
| 478 | +.item-box { | |
| 479 | + max-height: 80rem; | |
| 480 | + overflow-y: auto; | |
| 481 | +} | |
| 482 | +.item-list { | |
| 483 | + display: grid; | |
| 484 | + gap: $spacing-2xsm; | |
| 485 | + width: 100%; | |
| 486 | + &.col2 { | |
| 487 | + grid-template-columns: repeat(2, 1fr); | |
| 488 | + } | |
| 489 | + &.col3 { | |
| 490 | + grid-template-columns: repeat(3, 1fr); | |
| 491 | + } | |
| 492 | + &.col4 { | |
| 493 | + grid-template-columns: repeat(4, 1fr); | |
| 494 | + } | |
| 495 | + > li { | |
| 496 | + position: relative; | |
| 497 | + display:flex; | |
| 498 | + gap: $spacing-lg; | |
| 499 | + align-items: center; | |
| 500 | + overflow: hidden; | |
| 501 | + padding:1.6rem 2.4rem; | |
| 502 | + border:.1rem solid $color-gray30; | |
| 503 | + background-color: $color-background-default-primary; | |
| 504 | + border-radius: $radius-sm; | |
| 505 | + > * { | |
| 506 | + margin-bottom:0; | |
| 507 | + } | |
| 508 | + > .txt-area { | |
| 509 | + position: relative; | |
| 510 | + flex:1; | |
| 511 | + overflow: hidden; | |
| 512 | + } | |
| 513 | + .title-xsm { | |
| 514 | + margin:0; | |
| 515 | + flex:none; | |
| 516 | + width:6rem; | |
| 517 | + flex-wrap: nowrap; | |
| 518 | + word-break: keep-all; | |
| 519 | + text-align: center; | |
| 520 | + } | |
| 521 | + } | |
| 522 | + .txt-none { | |
| 523 | + border: none; | |
| 524 | + background: transparent; | |
| 525 | + height: 100%; | |
| 526 | + justify-content: center | |
| 527 | + } | |
| 528 | + &.sm { | |
| 529 | + > li { | |
| 530 | + padding:0.8rem; | |
| 531 | + gap:$spacing-xsm;; | |
| 532 | + min-height: 6rem; | |
| 533 | + &.is-active { | |
| 534 | + border-color: $spot; | |
| 535 | + } | |
| 536 | + } | |
| 537 | + .img-area { | |
| 538 | + width: 8rem; | |
| 539 | + } | |
| 540 | + .item-info { | |
| 541 | + min-height: 3.2rem; | |
| 542 | + gap:$spacing-xsm; | |
| 543 | + .editor-cont { | |
| 544 | + font-size:var(--fs); | |
| 545 | + // @include ellipsis(2); | |
| 546 | + // white-space: initial; | |
| 547 | + } | |
| 548 | + & + .item-info { | |
| 549 | + padding-top:$spacing-2xsm; | |
| 550 | + margin-top:$spacing-2xsm; | |
| 551 | + } | |
| 552 | + } | |
| 553 | + } | |
| 554 | +} | |
| 555 | +.ui-sortable { | |
| 556 | + .ico-move:hover { | |
| 557 | + cursor: move; | |
| 558 | + } | |
| 559 | +} | |
| 560 | + | |
| 561 | +.item-type-list { | |
| 562 | + &.border-top { | |
| 563 | + border-top:$stroke-secondary; | |
| 564 | + } | |
| 565 | + > li { | |
| 566 | + display: flex; | |
| 567 | + gap:$spacing-md; | |
| 568 | + padding:$spacing-lg 0; | |
| 569 | + border-bottom: $stroke-secondary; | |
| 570 | + position: relative; | |
| 571 | + } | |
| 572 | + .item-checkradio { | |
| 573 | + align-self: flex-start; | |
| 574 | + margin-right: 0; | |
| 575 | + } | |
| 576 | + .etc-fnc-area { | |
| 577 | + position: absolute; | |
| 578 | + top:$spacing-lg; | |
| 579 | + right:0; | |
| 580 | + z-index: 4; | |
| 581 | + &.is-active { | |
| 582 | + z-index: 4; | |
| 583 | + } | |
| 584 | + } | |
| 585 | + .img-area { | |
| 586 | + width: 32rem; | |
| 587 | + flex:none; | |
| 588 | + &.sm { | |
| 589 | + width: 24rem; | |
| 590 | + } | |
| 591 | + figure { | |
| 592 | + border-radius: $radius-sm; | |
| 593 | + border:$stroke-secondary; | |
| 594 | + overflow:hidden; | |
| 595 | + width: 100%; | |
| 596 | + aspect-ratio: 16/9; | |
| 597 | + img { | |
| 598 | + display:block; | |
| 599 | + object-fit:cover; | |
| 600 | + width: 100%; | |
| 601 | + height: 100%; | |
| 602 | + } | |
| 603 | + } | |
| 604 | + } | |
| 605 | + .img-info-area { | |
| 606 | + display: flex; | |
| 607 | + flex-direction: column; | |
| 608 | + gap:$spacing-xsm; | |
| 609 | + margin-top:$spacing-xsm; | |
| 610 | + } | |
| 611 | + .txt-area { | |
| 612 | + flex:1; | |
| 613 | + display: flex; | |
| 614 | + flex-direction: column; | |
| 615 | + gap:$spacing-sm; | |
| 616 | + } | |
| 617 | + .item-btn-area { | |
| 618 | + flex:none; | |
| 619 | + display: flex; | |
| 620 | + flex-direction: column; | |
| 621 | + gap:$spacing-xsm; | |
| 622 | + justify-content: center; | |
| 623 | + .btn { | |
| 624 | + min-width: 12.8rem; | |
| 625 | + width: 100%; | |
| 626 | + transition: none; | |
| 627 | + // white-space: nowrap; | |
| 628 | + text-align: center; | |
| 629 | + word-break: keep-all | |
| 630 | + } | |
| 631 | + } | |
| 632 | + .item-title { | |
| 633 | + @include ellipsis(2); | |
| 634 | + @include typo('tit-md'); | |
| 635 | + } | |
| 636 | + .txt { | |
| 637 | + @include ellipsis(2); | |
| 638 | + @include typo('body-md'); | |
| 639 | + } | |
| 640 | + .item-info-list { | |
| 641 | + > li { | |
| 642 | + position: relative; | |
| 643 | + display: flex; | |
| 644 | + justify-content: space-between; | |
| 645 | + border-radius: 2em; | |
| 646 | + background: $color-background-default-secondary; | |
| 647 | + color:$color-font-default-tertiary; | |
| 648 | + font-size: $size-font-xsm; | |
| 649 | + padding:$spacing-2xsm $spacing-sm; | |
| 650 | + > strong { | |
| 651 | + font-weight: $size-font-weight-md; | |
| 652 | + } | |
| 653 | + .txt-area { | |
| 654 | + font-weight: $size-font-weight-lg; | |
| 655 | + text-align: right; | |
| 656 | + } | |
| 657 | + } | |
| 658 | + .txt-area { | |
| 659 | + text-align: left; | |
| 660 | + } | |
| 661 | + } | |
| 662 | + &.item-type-thumb { | |
| 663 | + display: grid; | |
| 664 | + grid-template-columns: repeat(4, 1fr); | |
| 665 | + gap:6.4rem $spacing-md; | |
| 666 | + >li { | |
| 667 | + flex-direction: column; | |
| 668 | + padding:0; | |
| 669 | + border-bottom:0; | |
| 670 | + } | |
| 671 | + .item-checkradio { | |
| 672 | + position: absolute; | |
| 673 | + top:$spacing-xsm; | |
| 674 | + left: $spacing-xsm; | |
| 675 | + } | |
| 676 | + .etc-fnc-area { | |
| 677 | + top:$spacing-xsm; | |
| 678 | + right: $spacing-xsm; | |
| 679 | + } | |
| 680 | + .img-area { | |
| 681 | + width: 100%; | |
| 682 | + } | |
| 683 | + .item-btn-area { | |
| 684 | + flex-direction: row; | |
| 685 | + flex-wrap: wrap; | |
| 686 | + .btn { | |
| 687 | + // min-width: 0; | |
| 688 | + flex:1; | |
| 689 | + padding:0 $spacing-xsm; | |
| 690 | + &.primary { | |
| 691 | + min-width: 100%; | |
| 692 | + } | |
| 693 | + } | |
| 694 | + } | |
| 695 | + } | |
| 696 | + &.item-type-table { | |
| 697 | + >li { | |
| 698 | + align-items: center; | |
| 699 | + } | |
| 700 | + .img-area { | |
| 701 | + order:1; | |
| 702 | + width: 12rem; | |
| 703 | + figure { | |
| 704 | + display: none; | |
| 705 | + } | |
| 706 | + &:has(.btn-info-list) { | |
| 707 | + width: auto; | |
| 708 | + } | |
| 709 | + .btn-info-list { | |
| 710 | + flex-wrap: nowrap; | |
| 711 | + } | |
| 712 | + } | |
| 713 | + .txt-area { | |
| 714 | + order:0; | |
| 715 | + min-width: 0; | |
| 716 | + .txt { | |
| 717 | + display: none; | |
| 718 | + } | |
| 719 | + } | |
| 720 | + .item-title { | |
| 721 | + @include ellipsis(1); | |
| 722 | + display: block; | |
| 723 | + } | |
| 724 | + .item-btn-area { | |
| 725 | + order:2; | |
| 726 | + flex-direction: row; | |
| 727 | + } | |
| 728 | + .item-info-list { | |
| 729 | + > li { | |
| 730 | + background-color: transparent; | |
| 731 | + flex-direction: column; | |
| 732 | + padding:0; | |
| 733 | + .txt-area { | |
| 734 | + text-align: left; | |
| 735 | + } | |
| 736 | + } | |
| 737 | + } | |
| 738 | + } | |
| 739 | +} | |
| 740 | +.btn-info-list { | |
| 741 | + display: flex; | |
| 742 | + flex-wrap:wrap; | |
| 743 | + gap:$spacing-xsm $spacing-xsm; | |
| 744 | + justify-content: space-evenly; | |
| 745 | + li { | |
| 746 | + display: flex; | |
| 747 | + gap:$spacing-2xsm; | |
| 748 | + align-items: center; | |
| 749 | + } | |
| 750 | + .btn { | |
| 751 | + flex:none; | |
| 752 | + } | |
| 753 | + .txt { | |
| 754 | + font-weight: $size-font-weight-md; | |
| 755 | + font-size: $size-font-xsm; | |
| 756 | + color:$color-font-default-secondary; | |
| 757 | + } | |
| 758 | + button, | |
| 759 | + a { | |
| 760 | + &.txt { | |
| 761 | + text-decoration:underline; | |
| 762 | + } | |
| 763 | + } | |
| 764 | +} | |
| 765 | + | |
| 766 | +@include responsive(mobile) { | |
| 767 | + [data-responsive="true"]:root { | |
| 768 | + .checkradio-custom-row-area:has(.item-type-checkradio) { | |
| 769 | + display: none; | |
| 770 | + } | |
| 771 | + &.item-type-table { | |
| 772 | + >li { | |
| 773 | + align-items: center; | |
| 774 | + } | |
| 775 | + .img-area { | |
| 776 | + order:1; | |
| 777 | + width: 12rem; | |
| 778 | + figure { | |
| 779 | + display: none; | |
| 780 | + } | |
| 781 | + &:has(.btn-info-list) { | |
| 782 | + width: auto; | |
| 783 | + } | |
| 784 | + .btn-info-list { | |
| 785 | + flex-wrap: nowrap; | |
| 786 | + } | |
| 787 | + } | |
| 788 | + .txt-area { | |
| 789 | + order:0; | |
| 790 | + min-width: 0; | |
| 791 | + .txt { | |
| 792 | + display: none; | |
| 793 | + } | |
| 794 | + } | |
| 795 | + .item-title { | |
| 796 | + @include ellipsis(1); | |
| 797 | + display: block; | |
| 798 | + } | |
| 799 | + .item-btn-area { | |
| 800 | + order:2; | |
| 801 | + flex-direction: row; | |
| 802 | + } | |
| 803 | + .item-info-list { | |
| 804 | + > li { | |
| 805 | + background-color: transparent; | |
| 806 | + flex-direction: column; | |
| 807 | + padding:0; | |
| 808 | + .txt-area { | |
| 809 | + text-align: left; | |
| 810 | + } | |
| 811 | + } | |
| 812 | + } | |
| 813 | + } | |
| 814 | + .item-type-list, | |
| 815 | + .item-type-list.item-type-table, | |
| 816 | + .item-type-list.item-type-feed, | |
| 817 | + .item-type-list.item-type-thumb { | |
| 818 | + display: grid; | |
| 819 | + grid-template-columns: initial; | |
| 820 | + gap:6.4rem $spacing-md; | |
| 821 | + >li { | |
| 822 | + flex-direction: column; | |
| 823 | + padding:0; | |
| 824 | + border-bottom:0; | |
| 825 | + gap:$spacing-xsm; | |
| 826 | + align-items: flex-start; | |
| 827 | + min-width: 0; | |
| 828 | + } | |
| 829 | + .item-checkradio { | |
| 830 | + position: absolute; | |
| 831 | + top:$spacing-xsm; | |
| 832 | + left: $spacing-xsm; | |
| 833 | + } | |
| 834 | + .etc-fnc-area { | |
| 835 | + top:$spacing-xsm; | |
| 836 | + right: $spacing-xsm; | |
| 837 | + } | |
| 838 | + .img-area { | |
| 839 | + order: unset; | |
| 840 | + width: 100%; | |
| 841 | + | |
| 842 | + figure { | |
| 843 | + display: flex; | |
| 844 | + } | |
| 845 | + | |
| 846 | + &:has(.btn-info-list) { | |
| 847 | + width: 100%; | |
| 848 | + } | |
| 849 | + | |
| 850 | + .btn-info-list { | |
| 851 | + flex-wrap: wrap; | |
| 852 | + } | |
| 853 | + } | |
| 854 | + | |
| 855 | + .txt-area { | |
| 856 | + order: unset; | |
| 857 | + min-width: 0; | |
| 858 | + | |
| 859 | + .txt { | |
| 860 | + display: block; | |
| 861 | + } | |
| 862 | + } | |
| 863 | + .item-title { | |
| 864 | + @include ellipsis(2); | |
| 865 | + white-space: initial; | |
| 866 | + } | |
| 867 | + .item-info-list { | |
| 868 | + >li { | |
| 869 | + position: relative; | |
| 870 | + display: flex; | |
| 871 | + flex-direction: row; | |
| 872 | + justify-content: space-between; | |
| 873 | + border-radius: 2em; | |
| 874 | + background: $color-background-default-secondary; | |
| 875 | + color: $color-font-default-tertiary; | |
| 876 | + font-size: $size-font-xsm; | |
| 877 | + padding: $spacing-2xsm $spacing-sm; | |
| 878 | + | |
| 879 | + >strong { | |
| 880 | + font-weight: $size-font-weight-md; | |
| 881 | + } | |
| 882 | + | |
| 883 | + .txt-area { | |
| 884 | + font-weight: $size-font-weight-lg; | |
| 885 | + text-align: right; | |
| 886 | + } | |
| 887 | + } | |
| 888 | + | |
| 889 | + .txt-area { | |
| 890 | + text-align: left; | |
| 891 | + } | |
| 892 | + } | |
| 893 | + .item-btn-area { | |
| 894 | + width: 100%; | |
| 895 | + flex-direction: row; | |
| 896 | + flex-wrap: wrap; | |
| 897 | + .btn { | |
| 898 | + flex:1; | |
| 899 | + padding:0 $spacing-xsm; | |
| 900 | + &.primary { | |
| 901 | + min-width: 100%; | |
| 902 | + } | |
| 903 | + } | |
| 904 | + } | |
| 905 | + .btn-info-list { | |
| 906 | + justify-content: flex-start; | |
| 907 | + } | |
| 908 | + } | |
| 909 | + // .item-type-table { | |
| 910 | + // > li { | |
| 911 | + // flex-wrap: wrap; | |
| 912 | + // } | |
| 913 | + // .img-area { | |
| 914 | + // width: 100%; | |
| 915 | + // } | |
| 916 | + // .btn-info-list { | |
| 917 | + // justify-content: flex-start; | |
| 918 | + // } | |
| 919 | + // } | |
| 920 | + } | |
| 921 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/component/_popup.scss
... | ... | @@ -0,0 +1,415 @@ |
| 1 | +:root { | |
| 2 | + --pop-gap:4rem; | |
| 3 | +} | |
| 4 | +$pop-gap: var(--pop-gap); | |
| 5 | +.dim { | |
| 6 | + display: none; | |
| 7 | + position: fixed; | |
| 8 | + width: 100%; | |
| 9 | + height: 100%; | |
| 10 | + top: 0; | |
| 11 | + left: 0; | |
| 12 | + background: rgba(0, 0, 0, 0.5); | |
| 13 | + z-index: 99; | |
| 14 | +} | |
| 15 | +.popup, | |
| 16 | +.popup-alert, | |
| 17 | +.popup-modal { | |
| 18 | + position: fixed; | |
| 19 | + display: flex; | |
| 20 | + flex-direction: column; | |
| 21 | + background-color: $color-background-default-primary; | |
| 22 | + padding: $spacing-2xlg $pop-gap $spacing-lg; | |
| 23 | + overflow-y: hidden; | |
| 24 | + img { | |
| 25 | + max-width: 100%; | |
| 26 | + } | |
| 27 | + .pop-header { | |
| 28 | + display: flex; | |
| 29 | + flex-direction: column; | |
| 30 | + gap: $spacing-2xsm; | |
| 31 | + padding-bottom: $spacing-lg; | |
| 32 | + h1 { | |
| 33 | + display: block; | |
| 34 | + @include typo('tit-lg'); | |
| 35 | + } | |
| 36 | + p { | |
| 37 | + @include typo('body-sm'); | |
| 38 | + color:$color-font-default-tertiary; | |
| 39 | + } | |
| 40 | + } | |
| 41 | + .pop-body { | |
| 42 | + flex-grow: 1; | |
| 43 | + overflow-y: auto; | |
| 44 | + width: calc(100% + $pop-gap * 2); | |
| 45 | + margin-left:calc($pop-gap * -1); | |
| 46 | + margin-right:calc($pop-gap * -1); | |
| 47 | + padding:0 $pop-gap $spacing-lg; | |
| 48 | + } | |
| 49 | + .pop-close { | |
| 50 | + top:$spacing-lg; | |
| 51 | + right:$spacing-md; | |
| 52 | + } | |
| 53 | +} | |
| 54 | +.popup, | |
| 55 | +.popup-alert { | |
| 56 | + border: 1px solid $color-gray30; | |
| 57 | + max-width: calc(100% - $size-wrap-spacing * 2); | |
| 58 | + left: 50%; | |
| 59 | + top: 50%; | |
| 60 | + transform: translate(-50%, -50%); | |
| 61 | + box-shadow: $shadow-md; | |
| 62 | + border-radius: $radius-md; | |
| 63 | +} | |
| 64 | +// .popup, | |
| 65 | +// .popup-alert { | |
| 66 | +// $pop-gap: 4rem; | |
| 67 | +// position: fixed; | |
| 68 | +// flex-direction: column; | |
| 69 | +// border: 1px solid $color-gray30; | |
| 70 | +// max-width: calc(100% - $size-wrap-spacing * 2); | |
| 71 | +// left: 50%; | |
| 72 | +// top: 50%; | |
| 73 | +// transform: translate(-50%, -50%); | |
| 74 | +// background-color: $color-background-default-primary; | |
| 75 | +// box-shadow: $shadow-md; | |
| 76 | +// border-radius: $radius-md; | |
| 77 | +// padding: 3.2rem $pop-gap; | |
| 78 | +// overflow-y: hidden; | |
| 79 | +// img { | |
| 80 | +// max-width: 100%; | |
| 81 | +// } | |
| 82 | +// .pop-header { | |
| 83 | +// display: flex; | |
| 84 | +// flex-direction: column; | |
| 85 | +// gap: $spacing-2xsm; | |
| 86 | +// h1 { | |
| 87 | +// display: block; | |
| 88 | +// @include typo('tit-md'); | |
| 89 | +// } | |
| 90 | +// p { | |
| 91 | +// @include typo('body-sm'); | |
| 92 | +// } | |
| 93 | +// } | |
| 94 | +// .pop-body { | |
| 95 | +// flex-grow: 1; | |
| 96 | +// overflow-y: auto; | |
| 97 | +// width: calc(100% + $pop-gap * 2); | |
| 98 | +// margin-left:$pop-gap * -1; | |
| 99 | +// margin-right:$pop-gap * -1; | |
| 100 | +// padding:0 $pop-gap; | |
| 101 | +// } | |
| 102 | +// } | |
| 103 | +.popup, | |
| 104 | +.popup-modal { | |
| 105 | + max-width: calc(100% - $pop-gap*2); | |
| 106 | + width: $size-popup-md; | |
| 107 | + z-index: 100; | |
| 108 | + .pop-header { | |
| 109 | + padding-right:6.4rem; | |
| 110 | + } | |
| 111 | + .pop-footer { | |
| 112 | + padding-top:$spacing-md; | |
| 113 | + display: flex; | |
| 114 | + flex-direction: column; | |
| 115 | + gap:$spacing-md $spacing-xsm; | |
| 116 | + > * { | |
| 117 | + margin:0; | |
| 118 | + } | |
| 119 | + .pop-btn-cont { | |
| 120 | + display: flex; | |
| 121 | + justify-content: center; | |
| 122 | + gap:$spacing-xsm; | |
| 123 | + button { | |
| 124 | + flex:1; | |
| 125 | + min-width: 0; | |
| 126 | + max-width: 200px; | |
| 127 | + } | |
| 128 | + } | |
| 129 | + &.border-top { | |
| 130 | + border-top:$stroke-secondary; | |
| 131 | + width: calc(100% + 8rem); | |
| 132 | + margin-left: -4rem; | |
| 133 | + padding-left:4rem; | |
| 134 | + padding-right:4rem; | |
| 135 | + } | |
| 136 | + } | |
| 137 | + | |
| 138 | + $popup-sizes: ( | |
| 139 | + xsm: $size-popup-xsm, | |
| 140 | + sm: $size-popup-sm, | |
| 141 | + lg: $size-popup-lg, | |
| 142 | + xlg: $size-popup-xlg, | |
| 143 | + ); | |
| 144 | + | |
| 145 | + @each $key, $value in $popup-sizes { | |
| 146 | + &.#{$key} { | |
| 147 | + width: $value; | |
| 148 | + } | |
| 149 | + } | |
| 150 | + // &.2xlg { | |
| 151 | + // width: $size-popup-2xlg; | |
| 152 | + // } | |
| 153 | + &.full { | |
| 154 | + width: 100%; | |
| 155 | + max-width: 100%; | |
| 156 | + height: 100%; | |
| 157 | + max-height: 100%; | |
| 158 | + border-radius:0; | |
| 159 | + border:none; | |
| 160 | + } | |
| 161 | + .pop-close { | |
| 162 | + top:calc($pop-gap - .4rem); | |
| 163 | + right:$pop-gap; | |
| 164 | + } | |
| 165 | +} | |
| 166 | +.popup { | |
| 167 | + display: none; | |
| 168 | + max-height: calc(100vh - $size-wrap-spacing * 2); | |
| 169 | +} | |
| 170 | + | |
| 171 | +.pop-close { | |
| 172 | + position: absolute; | |
| 173 | + top:0; | |
| 174 | + right:0; | |
| 175 | + width: 4rem; | |
| 176 | + height: 4rem; | |
| 177 | + overflow: hidden; | |
| 178 | + text-indent: -9999px; | |
| 179 | + &::before { | |
| 180 | + content: ""; | |
| 181 | + position: absolute; | |
| 182 | + top:50%; | |
| 183 | + left:50%; | |
| 184 | + transform: translate(-50%, -50%); | |
| 185 | + display: inline-flex; | |
| 186 | + flex: 0 0 auto; | |
| 187 | + @include ico-set($color-icon-default-secondary, $size-icon-lg); | |
| 188 | + mask-image: url(pathIcon(map-get($icons,"ico-close"))); | |
| 189 | + } | |
| 190 | + &.white, | |
| 191 | + &.wh { | |
| 192 | + &::before { | |
| 193 | + background-color: $color-icon-default-primary-inverse; | |
| 194 | + } | |
| 195 | + } | |
| 196 | + &.lg { | |
| 197 | + &::before { | |
| 198 | + width: 3.6rem; | |
| 199 | + height: 3.6rem; | |
| 200 | + } | |
| 201 | + } | |
| 202 | +} | |
| 203 | +.popup-alert-area { | |
| 204 | + @extend .dim; | |
| 205 | + display: none; | |
| 206 | + z-index: 102; | |
| 207 | +} | |
| 208 | +.popup-alert { | |
| 209 | + width: 40rem; | |
| 210 | + .pop-header { | |
| 211 | + align-items: center; | |
| 212 | + margin-bottom: $spacing-sm; | |
| 213 | + padding-bottom: 0; | |
| 214 | + h1 { | |
| 215 | + @include typo('tit-sm'); | |
| 216 | + } | |
| 217 | + } | |
| 218 | + img { | |
| 219 | + display: block; | |
| 220 | + max-width: 100%; | |
| 221 | + margin: 0 auto; | |
| 222 | + } | |
| 223 | + .pop-body { | |
| 224 | + text-align: center; | |
| 225 | + } | |
| 226 | + .pop-footer { | |
| 227 | + display: flex; | |
| 228 | + border-top:$stroke-secondary; | |
| 229 | + margin:2.4rem calc($pop-gap * -1) -3.2rem; | |
| 230 | + button { | |
| 231 | + flex:1; | |
| 232 | + display: flex; | |
| 233 | + align-items: center; | |
| 234 | + justify-content: center; | |
| 235 | + height: 6.4rem; | |
| 236 | + border-left:$stroke-secondary; | |
| 237 | + color: $color-font-default-tertiary; | |
| 238 | + font-size:1.6rem; | |
| 239 | + &:first-child { | |
| 240 | + border-left: none; | |
| 241 | + } | |
| 242 | + &:hover { | |
| 243 | + background-color: $color-background-default-secondary; | |
| 244 | + } | |
| 245 | + &.spot, &.primary { | |
| 246 | + color:$color-font-brand-primary; | |
| 247 | + font-weight: $size-font-weight-xlg; | |
| 248 | + } | |
| 249 | + &.spot2, &.success { | |
| 250 | + color:$color-font-success-primary; | |
| 251 | + font-weight: $size-font-weight-xlg; | |
| 252 | + } | |
| 253 | + &.spot3, &.danger { | |
| 254 | + color:$color-font-danger-primary; | |
| 255 | + font-weight: $size-font-weight-xlg; | |
| 256 | + } | |
| 257 | + } | |
| 258 | + } | |
| 259 | +} | |
| 260 | +.popup-zoom { | |
| 261 | + display: none; | |
| 262 | + position: fixed; | |
| 263 | + top: 50%; | |
| 264 | + left: 50%; | |
| 265 | + width: 100%; | |
| 266 | + transform: translate(-50%, -50%); | |
| 267 | + width: 100%; | |
| 268 | + overflow-y: auto; | |
| 269 | + box-sizing: border-box; | |
| 270 | + z-index: 101; | |
| 271 | + img { | |
| 272 | + display: block; | |
| 273 | + max-width: 100%; | |
| 274 | + margin: 0 auto; | |
| 275 | + } | |
| 276 | + .pop-header { | |
| 277 | + position: relative; | |
| 278 | + height: 6rem; | |
| 279 | + z-index: 10; | |
| 280 | + } | |
| 281 | + .pop-body { | |
| 282 | + display: flex; | |
| 283 | + width:100%; | |
| 284 | + flex-direction: column; | |
| 285 | + justify-content: center; | |
| 286 | + align-items: center; | |
| 287 | + height: calc(100vh - 6rem); | |
| 288 | + overflow-y: auto; | |
| 289 | + figure { | |
| 290 | + min-height: 0; | |
| 291 | + } | |
| 292 | + } | |
| 293 | +} | |
| 294 | +.popup-overlay-area { | |
| 295 | + position: absolute; | |
| 296 | + top: 0; | |
| 297 | + left: 0; | |
| 298 | + right:0; | |
| 299 | + bottom:0; | |
| 300 | + width: 100%; | |
| 301 | + height: 100%; | |
| 302 | + background: rgba($color: #333, $alpha: .8); | |
| 303 | + .popup-overlay { | |
| 304 | + display: flex; | |
| 305 | + flex-direction: column; | |
| 306 | + align-items: center; | |
| 307 | + justify-content: center; | |
| 308 | + max-width: 88rem; | |
| 309 | + padding:$spacing-2xlg; | |
| 310 | + width: 100%; | |
| 311 | + height: 100%; | |
| 312 | + margin:0 auto; | |
| 313 | + color: $color-white; | |
| 314 | + * { | |
| 315 | + color: $color-white; | |
| 316 | + } | |
| 317 | + .pop-body { | |
| 318 | + max-height: 100%; | |
| 319 | + overflow-y: auto; | |
| 320 | + } | |
| 321 | + } | |
| 322 | + .thumb-list { | |
| 323 | + .thumb-txt-area { | |
| 324 | + cite { | |
| 325 | + color: $color-gray50; | |
| 326 | + } | |
| 327 | + .label { | |
| 328 | + background-color: $color-gray70; | |
| 329 | + } | |
| 330 | + } | |
| 331 | + } | |
| 332 | +} | |
| 333 | +.popup-modal-area { | |
| 334 | + display: none; | |
| 335 | + position: fixed; | |
| 336 | + flex-direction: column; | |
| 337 | + align-items: center; | |
| 338 | + justify-content: center; | |
| 339 | + top: 0; | |
| 340 | + left: 0; | |
| 341 | + right: 0; | |
| 342 | + bottom: 0; | |
| 343 | + z-index: 100; | |
| 344 | + overflow: hidden; | |
| 345 | + .dim-modal { | |
| 346 | + position: fixed; | |
| 347 | + inset: 0; | |
| 348 | + background-color: rgba(0, 0, 0, 0.2); | |
| 349 | + backdrop-filter: blur(4px); | |
| 350 | + z-index: -1; | |
| 351 | + } | |
| 352 | + &.is-active { | |
| 353 | + display: flex; | |
| 354 | + .popup-modal { | |
| 355 | + display: flex; | |
| 356 | + animation: modalShow 0.5s forwards; | |
| 357 | + } | |
| 358 | + } | |
| 359 | +} | |
| 360 | +.popup-modal { | |
| 361 | + position: fixed; | |
| 362 | + right:0; | |
| 363 | + top:0; | |
| 364 | + bottom:0; | |
| 365 | + display: none; | |
| 366 | + transform: translateX(100%); | |
| 367 | + &.is-active { | |
| 368 | + display: flex; | |
| 369 | + animation: modalShow 0.5s forwards; | |
| 370 | + } | |
| 371 | +} | |
| 372 | +.pop-msg-area { | |
| 373 | + display: flex; | |
| 374 | + flex-direction: column; | |
| 375 | + text-align: center; | |
| 376 | + gap: $spacing-md; | |
| 377 | + .step + .img-area { | |
| 378 | + margin-top:-2.4rem; | |
| 379 | + } | |
| 380 | + .txt-area { | |
| 381 | + cite { | |
| 382 | + display: block; | |
| 383 | + margin-bottom: 0.4rem; | |
| 384 | + font-size: $size-font-sm; | |
| 385 | + font-weight: 700; | |
| 386 | + } | |
| 387 | + p { | |
| 388 | + color: $color-font-default-tertiary; | |
| 389 | + } | |
| 390 | + } | |
| 391 | +} | |
| 392 | + | |
| 393 | +@include responsive(mobile) { | |
| 394 | + //반응형 true | |
| 395 | + [data-responsive="true"] { | |
| 396 | + --pop-gap:1.6rem; | |
| 397 | + | |
| 398 | + .popup, | |
| 399 | + .popup-modal { | |
| 400 | + max-width: 100%; | |
| 401 | + width: 100%; | |
| 402 | + height: 100%; | |
| 403 | + max-height: 100%; | |
| 404 | + border-radius: initial; | |
| 405 | + padding-top: $spacing-lg; | |
| 406 | + padding-bottom: $spacing-none; | |
| 407 | + .pop-footer { | |
| 408 | + padding-bottom: $spacing-md; | |
| 409 | + .pop-btn-cont { | |
| 410 | + gap: $spacing-2xsm; | |
| 411 | + } | |
| 412 | + } | |
| 413 | + } | |
| 414 | + } | |
| 415 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/component/_table.scss
... | ... | @@ -0,0 +1,724 @@ |
| 1 | +table { | |
| 2 | + width: 100%; | |
| 3 | + border-collapse: collapse; | |
| 4 | + border-spacing: 0; | |
| 5 | + table-layout: fixed; | |
| 6 | + text-align: center; | |
| 7 | + word-break: keep-all; | |
| 8 | + caption { | |
| 9 | + @include hideElement; | |
| 10 | + } | |
| 11 | + td { | |
| 12 | + // padding: $spacing-xsm $spacing-md; | |
| 13 | + // height: 8rem; | |
| 14 | + // text-align: center; | |
| 15 | + // white-space: nowrap; | |
| 16 | + // overflow: hidden; | |
| 17 | + // text-overflow: ellipsis; | |
| 18 | + // &.title { | |
| 19 | + // padding: $spacing-xsm $spacing-md $spacing-xsm $spacing-2xlg; | |
| 20 | + // text-align: left; | |
| 21 | + // } | |
| 22 | + } | |
| 23 | + img { | |
| 24 | + max-width: 100%; | |
| 25 | + } | |
| 26 | +} | |
| 27 | +.txt-option { | |
| 28 | + @include typo('body-sm'); | |
| 29 | +} | |
| 30 | +.scroll-x { | |
| 31 | + overflow-x: auto; | |
| 32 | + table { | |
| 33 | + width: 100%; | |
| 34 | + } | |
| 35 | +} | |
| 36 | +.scroll-y { | |
| 37 | + position: relative; | |
| 38 | + overflow: auto; | |
| 39 | + &.border { | |
| 40 | + border: $stroke-secondary; | |
| 41 | + border-top: $size-stroke-xsm solid $color-stroke-default-primary; | |
| 42 | + } | |
| 43 | + .list-type, | |
| 44 | + .write-type, | |
| 45 | + .write-type2, | |
| 46 | + .info-type, | |
| 47 | + .view-type { | |
| 48 | + height: auto; | |
| 49 | + table { | |
| 50 | + border-top: none; | |
| 51 | + } | |
| 52 | + } | |
| 53 | + | |
| 54 | + thead { | |
| 55 | + position: sticky; | |
| 56 | + top: -0.1rem; | |
| 57 | + left: 0; | |
| 58 | + z-index: 1; | |
| 59 | + background-color: $color-background-default-secondary; | |
| 60 | + th { | |
| 61 | + background-color: $color-background-default-secondary; | |
| 62 | + } | |
| 63 | + } | |
| 64 | +} | |
| 65 | +.table-sticky { | |
| 66 | + overflow-x: auto; | |
| 67 | + position: relative; | |
| 68 | + table { | |
| 69 | + border-collapse: separate !important; | |
| 70 | + } | |
| 71 | + .sot-left { | |
| 72 | + position: sticky; | |
| 73 | + z-index: 3; | |
| 74 | + } | |
| 75 | + td.sot-left { | |
| 76 | + background-color: $color-background-default-primary; | |
| 77 | + } | |
| 78 | + thead { | |
| 79 | + position: sticky; | |
| 80 | + top:0; | |
| 81 | + z-index: 4; | |
| 82 | + background-color: #fff; | |
| 83 | + tr:last-of-type { | |
| 84 | + th, | |
| 85 | + td { | |
| 86 | + border-bottom:$size-stroke-md double $color-stroke-default-tertiary; | |
| 87 | + } | |
| 88 | + } | |
| 89 | + } | |
| 90 | +} | |
| 91 | +.list-type, | |
| 92 | +.write-type, | |
| 93 | +.write-type2, | |
| 94 | +.info-type, | |
| 95 | +.view-type { | |
| 96 | + &.bg-odd { | |
| 97 | + table { | |
| 98 | + tr:nth-child(odd) { | |
| 99 | + td { | |
| 100 | + background-color: $color-background-default-secondary; | |
| 101 | + } | |
| 102 | + | |
| 103 | + } | |
| 104 | + } | |
| 105 | + } | |
| 106 | + &.border-top-none { | |
| 107 | + table | |
| 108 | + { | |
| 109 | + border-top:none; | |
| 110 | + } | |
| 111 | + } | |
| 112 | + th, | |
| 113 | + td { | |
| 114 | + word-wrap: break-word; | |
| 115 | + word-break:break-all; | |
| 116 | + &.bg { | |
| 117 | + background-color: $color-background-default-secondary; | |
| 118 | + } | |
| 119 | + &.bg2 { | |
| 120 | + background-color: $color-background-default-tertiary; | |
| 121 | + } | |
| 122 | + } | |
| 123 | + &.scroll-x { | |
| 124 | + table { | |
| 125 | + border-collapse: separate; | |
| 126 | + } | |
| 127 | + } | |
| 128 | +} | |
| 129 | +.list-type, | |
| 130 | +.write-type { | |
| 131 | + position:relative; | |
| 132 | + th { | |
| 133 | + @include typo('tit-label'); | |
| 134 | + } | |
| 135 | + th, | |
| 136 | + td { | |
| 137 | + border-bottom: $stroke-secondary; | |
| 138 | + } | |
| 139 | + & + * { | |
| 140 | + margin-top: $spacing-2xlg; | |
| 141 | + } | |
| 142 | +} | |
| 143 | +.table-title { | |
| 144 | + display: inline-block; | |
| 145 | + vertical-align: middle; | |
| 146 | + @include ellipsis(1); | |
| 147 | + @include typo('body-md'); | |
| 148 | + max-width:100%; | |
| 149 | + width:auto; | |
| 150 | + @at-root a { | |
| 151 | + cursor: pointer; | |
| 152 | + &.table-title { | |
| 153 | + &:hover { | |
| 154 | + text-decoration: underline; | |
| 155 | + // color: $color-blue50; | |
| 156 | + font-weight: 700; | |
| 157 | + } | |
| 158 | + } | |
| 159 | + } | |
| 160 | +} | |
| 161 | +.table-info { | |
| 162 | + display: inline-flex; | |
| 163 | + gap:$spacing-3xsm; | |
| 164 | + @include typo('label-sm'); | |
| 165 | + vertical-align: middle; | |
| 166 | + align-items: center; | |
| 167 | + color:$color-font-default-secondary; | |
| 168 | +} | |
| 169 | +.message { | |
| 170 | + @include typo('body-sm'); | |
| 171 | +} | |
| 172 | +.list-type { | |
| 173 | + thead { | |
| 174 | + th { | |
| 175 | + border-bottom: none; | |
| 176 | + color: $color-font-default-tertiary; | |
| 177 | + background-color: $color-background-default-secondary; | |
| 178 | + &:first-child { | |
| 179 | + border-radius: $radius-sm 0 0 $radius-sm; | |
| 180 | + } | |
| 181 | + &:last-child { | |
| 182 | + border-radius: 0 $radius-sm $radius-sm 0; | |
| 183 | + } | |
| 184 | + } | |
| 185 | + } | |
| 186 | + tr { | |
| 187 | + &.is-current { | |
| 188 | + th, | |
| 189 | + td { | |
| 190 | + background-color: $color-background-brand-primary; | |
| 191 | + &:first-child { | |
| 192 | + } | |
| 193 | + } | |
| 194 | + } | |
| 195 | + &.is-disabled { | |
| 196 | + color:$color-font-disabled-primary; | |
| 197 | + .table-title { | |
| 198 | + color:$color-font-disabled-primary; | |
| 199 | + } | |
| 200 | + .etc-fnc-area { | |
| 201 | + button { | |
| 202 | + color: $color-font-default-tertiary; | |
| 203 | + } | |
| 204 | + } | |
| 205 | + } | |
| 206 | + &.is-inactive { | |
| 207 | + td { | |
| 208 | + position: relative; | |
| 209 | + &::after { | |
| 210 | + content: ""; | |
| 211 | + position: absolute; | |
| 212 | + inset:0; | |
| 213 | + background-color: rgba($color-white , .5); | |
| 214 | + z-index: 2; | |
| 215 | + } | |
| 216 | + } | |
| 217 | + } | |
| 218 | + .zindex-front { | |
| 219 | + position: relative; | |
| 220 | + z-index: 9; | |
| 221 | + } | |
| 222 | + } | |
| 223 | + th { | |
| 224 | + padding:$spacing-md $spacing-sm; | |
| 225 | + } | |
| 226 | + td { | |
| 227 | + height:6.4rem; | |
| 228 | + padding:$spacing-md $spacing-sm; | |
| 229 | + } | |
| 230 | + &.sm { | |
| 231 | + th { | |
| 232 | + height: 3.2rem; | |
| 233 | + font-size: $size-font-sm; | |
| 234 | + } | |
| 235 | + td { | |
| 236 | + height: 4.8rem; | |
| 237 | + padding:$spacing-xsm; | |
| 238 | + } | |
| 239 | + } | |
| 240 | + td { | |
| 241 | + .btn-cont, | |
| 242 | + .btn-flex-cont { | |
| 243 | + margin:0; | |
| 244 | + } | |
| 245 | + } | |
| 246 | + .etc-fnc-area { | |
| 247 | + align-items: center; | |
| 248 | + } | |
| 249 | +} | |
| 250 | +.write-type { | |
| 251 | + table { | |
| 252 | + border-top:$stroke-secondary; | |
| 253 | + } | |
| 254 | + th, | |
| 255 | + td { | |
| 256 | + text-align: left; | |
| 257 | + height: 7.2rem; | |
| 258 | + padding: $spacing-xsm $spacing-md; | |
| 259 | + } | |
| 260 | + th { | |
| 261 | + vertical-align: top; | |
| 262 | + padding-top:2.6rem; | |
| 263 | + color: $color-font-default-tertiary; | |
| 264 | + background-color: $color-background-default-secondary; | |
| 265 | + } | |
| 266 | + td { | |
| 267 | + > * { | |
| 268 | + margin-top: $spacing-2xsm; | |
| 269 | + margin-bottom: $spacing-2xsm; | |
| 270 | + } | |
| 271 | + > :not(.block), | |
| 272 | + > :not(.datepicker-box) { | |
| 273 | + margin-right: $spacing-2xsm; | |
| 274 | + } | |
| 275 | + > :last-child { | |
| 276 | + margin-right:0; | |
| 277 | + } | |
| 278 | + } | |
| 279 | + .q0, input[type=number].q0 { width: 20rem; min-width: 20rem; } | |
| 280 | + .q1 { width:calc((100% - 2.4rem) / 4); } | |
| 281 | + .q2 { width:calc((100% - .8rem) / 2); } | |
| 282 | + .q3 { width:calc((100% - 2.4rem) / 3 * 2); } | |
| 283 | + .q4 { width:100% } | |
| 284 | +} | |
| 285 | +.write-type2 { | |
| 286 | + table { | |
| 287 | + } | |
| 288 | + th, | |
| 289 | + td { | |
| 290 | + border-bottom: none; | |
| 291 | + text-align: left; | |
| 292 | + height: 4.4rem; | |
| 293 | + } | |
| 294 | + th { | |
| 295 | + color: $color-font-default-tertiary; | |
| 296 | + background-color: $color-background-default-secondary; | |
| 297 | + padding:1rem 0 0 0; | |
| 298 | + padding-right:$spacing-lg; | |
| 299 | + vertical-align:top; | |
| 300 | + } | |
| 301 | + td { | |
| 302 | + > * { | |
| 303 | + margin-top: $spacing-2xsm; | |
| 304 | + margin-bottom: $spacing-2xsm; | |
| 305 | + } | |
| 306 | + > :not(.block), | |
| 307 | + > :not(.datepicker-box) { | |
| 308 | + margin-right: .5rem; | |
| 309 | + } | |
| 310 | + > :last-child { | |
| 311 | + margin-right:0; | |
| 312 | + } | |
| 313 | + } | |
| 314 | + .q0, input[type=numver].q0 { width: 20rem; min-width: 20rem; } | |
| 315 | + .q1 { width:calc((100% - 2.4rem) / 4); } | |
| 316 | + .q2 { width:calc((100% - .8rem) / 2); } | |
| 317 | + .q3 { width:calc((100% - 2.4rem) / 3 * 2); } | |
| 318 | + .q4 { width:100% } | |
| 319 | +} | |
| 320 | +.info-type { | |
| 321 | + word-break: break-all; | |
| 322 | + table { | |
| 323 | + border-top:$stroke-secondary; | |
| 324 | + } | |
| 325 | + th, | |
| 326 | + td { | |
| 327 | + padding:$spacing-xsm; | |
| 328 | + height: 4.8rem; | |
| 329 | + border:$stroke-secondary; | |
| 330 | + border-top:none; | |
| 331 | + } | |
| 332 | + th { | |
| 333 | + @include typo('tit-label'); | |
| 334 | + background-color: $color-background-default-secondary; | |
| 335 | + } | |
| 336 | + thead th { | |
| 337 | + text-align:center; | |
| 338 | + } | |
| 339 | + .q0, input[type=numver].q0 { width: 20rem; min-width: 20rem; } | |
| 340 | + .q1 { width:calc((100% - 2.4rem) / 4); } | |
| 341 | + .q2 { width:calc((100% - .8rem) / 2); } | |
| 342 | + .q3 { width:calc((100% - 2.4rem) / 3 * 2); } | |
| 343 | + .q4 { width:100% } | |
| 344 | + &.border-vertical { | |
| 345 | + th { | |
| 346 | + background-color: $color-transparent; | |
| 347 | + } | |
| 348 | + th, | |
| 349 | + td { | |
| 350 | + border-left:none; | |
| 351 | + border-right: none; | |
| 352 | + } | |
| 353 | + table { | |
| 354 | + border-top: $size-stroke-xsm solid $color-stroke-default-primary; | |
| 355 | + } | |
| 356 | + } | |
| 357 | + tfoot { | |
| 358 | + background: $color-background-default-secondary; | |
| 359 | + .total-area { | |
| 360 | + display: flex; | |
| 361 | + padding: $spacing-2xsm $spacing-xlg; | |
| 362 | + justify-content: flex-end; | |
| 363 | + align-items: center; | |
| 364 | + gap: $spacing-xsm; | |
| 365 | + span { | |
| 366 | + @include typo ('label'); | |
| 367 | + color: $color-font-default-secondary; | |
| 368 | + } | |
| 369 | + em { | |
| 370 | + @include typo ('tit-md'); | |
| 371 | + color: $color-font-brand-accent; | |
| 372 | + } | |
| 373 | + } | |
| 374 | + } | |
| 375 | +} | |
| 376 | +.info-quiz { | |
| 377 | + text-align: left; | |
| 378 | + .txt-area { | |
| 379 | + cite { | |
| 380 | + // font-size: $size-font-smLg; | |
| 381 | + display: block; | |
| 382 | + font-weight: 700; | |
| 383 | + margin-top: $spacing-2xsm; | |
| 384 | + padding-bottom: $spacing-xsm; | |
| 385 | + margin-bottom: $spacing-xsm; | |
| 386 | + border-bottom: $stroke-secondary; | |
| 387 | + } | |
| 388 | + small { | |
| 389 | + font-size: $size-font-2xsm; | |
| 390 | + color: $color-font-default-tertiary; | |
| 391 | + } | |
| 392 | + .ico-gt { | |
| 393 | + margin: 0 0.2rem; | |
| 394 | + width: 1.2rem; | |
| 395 | + height: 1.2rem; | |
| 396 | + } | |
| 397 | + } | |
| 398 | + .info-fnc { | |
| 399 | + margin-top: $spacing-xsm; | |
| 400 | + } | |
| 401 | +} | |
| 402 | +// .view-type { | |
| 403 | +// img { max-width : 100% } | |
| 404 | +// thead { | |
| 405 | +// th { | |
| 406 | +// padding: 2.4rem 0; | |
| 407 | +// text-align: left; | |
| 408 | +// background-color: none; | |
| 409 | +// background: none !important; | |
| 410 | +// border-bottom: 1px solid $color-gray20; | |
| 411 | +// } | |
| 412 | +// h3 { | |
| 413 | +// font-size: 1.8rem; | |
| 414 | +// font-weight: 700; | |
| 415 | +// } | |
| 416 | +// .info-quiz { | |
| 417 | +// margin-top: $spacing-2xsm; | |
| 418 | +// } | |
| 419 | +// } | |
| 420 | +// tbody { | |
| 421 | +// td { | |
| 422 | +// padding: 2.4rem 0; | |
| 423 | +// border-bottom: 1px solid $color-gray20; | |
| 424 | +// } | |
| 425 | +// } | |
| 426 | +// .info-quiz { | |
| 427 | +// display: flex; | |
| 428 | +// flex-wrap: wrap; | |
| 429 | +// li { | |
| 430 | +// position: relative; | |
| 431 | +// &:after { | |
| 432 | +// content: " "; | |
| 433 | +// display: inline-block; | |
| 434 | +// width: 0.1rem; | |
| 435 | +// height: 1.2rem; | |
| 436 | +// margin: 0 $spacing-xsm; | |
| 437 | +// margin-top: -0.2rem; | |
| 438 | +// background-color: $color-black; | |
| 439 | +// vertical-align: middle; | |
| 440 | +// } | |
| 441 | +// &:last-child { | |
| 442 | +// margin-right: 0; | |
| 443 | +// padding-right: 0; | |
| 444 | +// &:after { | |
| 445 | +// display: none; | |
| 446 | +// } | |
| 447 | +// } | |
| 448 | +// } | |
| 449 | +// } | |
| 450 | +// } | |
| 451 | + | |
| 452 | +/* board reset */ | |
| 453 | +#boardContents { | |
| 454 | + padding: 4rem 0; | |
| 455 | + h1, | |
| 456 | + h2, | |
| 457 | + h3, | |
| 458 | + h4, | |
| 459 | + h5, | |
| 460 | + h6 { | |
| 461 | + margin: initial; | |
| 462 | + padding: initial; | |
| 463 | + line-height: 1.8em; | |
| 464 | + } | |
| 465 | + h1 { | |
| 466 | + font-size: 2rem; | |
| 467 | + } | |
| 468 | + h2 { | |
| 469 | + font-size: 1.5rem; | |
| 470 | + } | |
| 471 | + h3 { | |
| 472 | + font-size: 1.17rem; | |
| 473 | + } | |
| 474 | + h4 { | |
| 475 | + font-size: 1rem; | |
| 476 | + } | |
| 477 | + h5 { | |
| 478 | + font-size: 0.83rem; | |
| 479 | + } | |
| 480 | + h6 { | |
| 481 | + font-size: 0.67rem; | |
| 482 | + } | |
| 483 | + ol, | |
| 484 | + ol li { | |
| 485 | + list-style: decimal; | |
| 486 | + } | |
| 487 | + ul, | |
| 488 | + ul li { | |
| 489 | + list-style: disc; | |
| 490 | + } | |
| 491 | + img { | |
| 492 | + max-width: 100%; | |
| 493 | + margin: 0 auto; | |
| 494 | + } | |
| 495 | +} | |
| 496 | +.editor-img-none { | |
| 497 | + img { | |
| 498 | + display: none !important; | |
| 499 | + } | |
| 500 | +} | |
| 501 | + | |
| 502 | +@include responsive(tabletSm) { | |
| 503 | + .list-type:not(.table-sticky), | |
| 504 | + .write-type { | |
| 505 | + table { | |
| 506 | + border-top: $size-stroke-xsm solid $color-stroke-default-primary; | |
| 507 | + text-align: left; | |
| 508 | + } | |
| 509 | + thead { | |
| 510 | + display: none; | |
| 511 | + } | |
| 512 | + } | |
| 513 | + .table-title { | |
| 514 | + // display: flex; | |
| 515 | + // flex-direction: column; | |
| 516 | + // gap:$spacing-2xsm; | |
| 517 | + color: $color-font-default-primary; | |
| 518 | + font-size: $size-font-md; | |
| 519 | + font-weight: 700; | |
| 520 | + .label { | |
| 521 | + width: fit-content; | |
| 522 | + } | |
| 523 | + } | |
| 524 | + .list-type:not(.table-sticky), | |
| 525 | + .list-type.sm:not(.table-sticky) { | |
| 526 | + col, | |
| 527 | + tbody th, | |
| 528 | + tbody td { | |
| 529 | + display: flex; | |
| 530 | + align-items: center; | |
| 531 | + width: auto; | |
| 532 | + height: auto; | |
| 533 | + min-height:initial; | |
| 534 | + padding: 0; | |
| 535 | + border: none; | |
| 536 | + } | |
| 537 | + tbody { | |
| 538 | + tr { | |
| 539 | + position: relative; | |
| 540 | + display: flex; | |
| 541 | + gap:$spacing-2xsm; | |
| 542 | + align-items: center; | |
| 543 | + flex-wrap: wrap; | |
| 544 | + min-width: initial; | |
| 545 | + width: 100%; | |
| 546 | + padding: $spacing-md 0; | |
| 547 | + border-bottom:$stroke-secondary; | |
| 548 | + &:has(.etc-fnc-area) { | |
| 549 | + padding-right:calc($spacing-2xsm + 2rem); | |
| 550 | + } | |
| 551 | + } | |
| 552 | + td { | |
| 553 | + color: $color-font-default-secondary; | |
| 554 | + &:not(.m-row) { | |
| 555 | + margin-right: $spacing-md; | |
| 556 | + &:last-of-type { | |
| 557 | + margin-right: 0; | |
| 558 | + } | |
| 559 | + } | |
| 560 | + &.m-row { | |
| 561 | + width: 100%; | |
| 562 | + br { | |
| 563 | + display: none; | |
| 564 | + } | |
| 565 | + } | |
| 566 | + &.align-left { | |
| 567 | + display: block; | |
| 568 | + width: 100%; | |
| 569 | + } | |
| 570 | + &:has(.table-title) { | |
| 571 | + display:block; | |
| 572 | + width: 100%; | |
| 573 | + padding-bottom: $spacing-2xsm; | |
| 574 | + color: $color-font-default-secondary; | |
| 575 | + margin-right: 0; | |
| 576 | + &:last-child { | |
| 577 | + padding-bottom:0; | |
| 578 | + } | |
| 579 | + } | |
| 580 | + .etc-fnc-area { | |
| 581 | + position: absolute; | |
| 582 | + right:0; | |
| 583 | + top: $spacing-md; | |
| 584 | + } | |
| 585 | + } | |
| 586 | + [data-tit]::before { | |
| 587 | + content: attr(data-tit) " : "; | |
| 588 | + display: inline-block; | |
| 589 | + margin-right: $spacing-2xsm; | |
| 590 | + } | |
| 591 | + } | |
| 592 | + } | |
| 593 | + .write-type { | |
| 594 | + table { | |
| 595 | + col, | |
| 596 | + colgroup { | |
| 597 | + display: none; | |
| 598 | + } | |
| 599 | + tr { | |
| 600 | + display: flex; | |
| 601 | + flex-direction: column; | |
| 602 | + gap:$spacing-xsm; | |
| 603 | + padding:$spacing-md 0 $spacing-sm; | |
| 604 | + border-bottom:$stroke-secondary; | |
| 605 | + } | |
| 606 | + th { | |
| 607 | + background-color: transparent; | |
| 608 | + } | |
| 609 | + th, | |
| 610 | + td { | |
| 611 | + display: block; | |
| 612 | + // gap:$spacing-2xsm; | |
| 613 | + // flex-wrap: wrap; | |
| 614 | + //align-items: center; | |
| 615 | + width: 100%; | |
| 616 | + height: auto; | |
| 617 | + border: none; | |
| 618 | + text-align: left; | |
| 619 | + min-width: 0; | |
| 620 | + padding:0; | |
| 621 | + } | |
| 622 | + td { | |
| 623 | + > :not(.block, .datepicker-box), | |
| 624 | + > * { | |
| 625 | + margin-bottom: $spacing-3xsm; | |
| 626 | + } | |
| 627 | + input[type=text], | |
| 628 | + input[type=search], | |
| 629 | + input[type=password], | |
| 630 | + input[type=number], | |
| 631 | + input[type=email], | |
| 632 | + input[type=tel], | |
| 633 | + input[type=time], | |
| 634 | + input[type=date], | |
| 635 | + input[type=datetime-local], | |
| 636 | + input[type=month], | |
| 637 | + input[type=week] { | |
| 638 | + &:not(.q0, .q1) { | |
| 639 | + width: 100%; | |
| 640 | + } | |
| 641 | + } | |
| 642 | + } | |
| 643 | + .message { | |
| 644 | + width: 100%; | |
| 645 | + } | |
| 646 | + } | |
| 647 | + } | |
| 648 | + .write-type2 { | |
| 649 | + table { | |
| 650 | + | |
| 651 | + col, | |
| 652 | + colgroup { | |
| 653 | + display: none; | |
| 654 | + } | |
| 655 | + | |
| 656 | + tr { | |
| 657 | + display: flex; | |
| 658 | + flex-direction: column; | |
| 659 | + gap: $spacing-xsm; | |
| 660 | + padding: $spacing-md 0; | |
| 661 | + border-bottom: $stroke-secondary; | |
| 662 | + &:last-of-type { | |
| 663 | + border-bottom: none; | |
| 664 | + } | |
| 665 | + } | |
| 666 | + | |
| 667 | + th { | |
| 668 | + background-color: transparent; | |
| 669 | + } | |
| 670 | + | |
| 671 | + th, | |
| 672 | + td { | |
| 673 | + display: block; | |
| 674 | + // gap:$spacing-2xsm; | |
| 675 | + // flex-wrap: wrap; | |
| 676 | + //align-items: center; | |
| 677 | + width: 100%; | |
| 678 | + height: auto; | |
| 679 | + border: none; | |
| 680 | + text-align: left; | |
| 681 | + min-width: 0; | |
| 682 | + padding: 0; | |
| 683 | + } | |
| 684 | + | |
| 685 | + td { | |
| 686 | + | |
| 687 | + > :not(.block, .datepicker-box), | |
| 688 | + >* { | |
| 689 | + margin-bottom: $spacing-3xsm; | |
| 690 | + } | |
| 691 | + | |
| 692 | + input[type=text], | |
| 693 | + input[type=search], | |
| 694 | + input[type=password], | |
| 695 | + input[type=number], | |
| 696 | + input[type=email], | |
| 697 | + input[type=tel], | |
| 698 | + input[type=time], | |
| 699 | + input[type=date], | |
| 700 | + input[type=datetime-local], | |
| 701 | + input[type=month], | |
| 702 | + input[type=week] { | |
| 703 | + &:not(.q0, .q1) { | |
| 704 | + width: 100%; | |
| 705 | + } | |
| 706 | + } | |
| 707 | + } | |
| 708 | + | |
| 709 | + .message { | |
| 710 | + width: 100%; | |
| 711 | + } | |
| 712 | + } | |
| 713 | + } | |
| 714 | + .table-sticky .sot-left { | |
| 715 | + position: initial; | |
| 716 | + } | |
| 717 | + .m-row { | |
| 718 | + &~ .m-row { | |
| 719 | + .btn-tbl-cont { | |
| 720 | + margin-top: $spacing-sm; | |
| 721 | + } | |
| 722 | + } | |
| 723 | + } | |
| 724 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/component/_tabs.scss
... | ... | @@ -0,0 +1,284 @@ |
| 1 | +/* tabs: tabsNav */ | |
| 2 | +.tabs-nav-lg, | |
| 3 | +.tabs-nav, | |
| 4 | +.tabs-nav-sm { | |
| 5 | + display: flex; | |
| 6 | + a, | |
| 7 | + button { | |
| 8 | + display: flex; | |
| 9 | + align-items: center; | |
| 10 | + justify-content: center; | |
| 11 | + text-align: center; | |
| 12 | + text-decoration: none; | |
| 13 | + word-break: keep-all; | |
| 14 | + line-height: 1.1; | |
| 15 | + width: 100%; | |
| 16 | + } | |
| 17 | +} | |
| 18 | +.tabs-nav-lg { | |
| 19 | + margin-bottom: $spacing-2xlg; | |
| 20 | + background-color: $color-background-default-tertiary; | |
| 21 | + border-radius: $radius-md $radius-md 0 0; | |
| 22 | + li { | |
| 23 | + flex: 1; | |
| 24 | + } | |
| 25 | + a, | |
| 26 | + button { | |
| 27 | + height: 5.6rem; | |
| 28 | + @include typo('label-lg','strong'); | |
| 29 | + color:$color-font-default-secondary; | |
| 30 | + background-color: $color-background-default-tertiary; | |
| 31 | + border-radius: $radius-md $radius-md 0 0; | |
| 32 | + padding:0 $spacing-md; | |
| 33 | + &:not(.is-active):hover { | |
| 34 | + filter: brightness(95%); | |
| 35 | + } | |
| 36 | + &.is-active { | |
| 37 | + font-weight: $size-font-weight-xlg; | |
| 38 | + color:$color-font-brand-primary-base; | |
| 39 | + background-color: $color-background-default-primary; | |
| 40 | + | |
| 41 | + border: .2rem solid $color-stroke-brand-primary; | |
| 42 | + border-bottom: transparent; | |
| 43 | + } | |
| 44 | + } | |
| 45 | +} | |
| 46 | +.tabs-nav { | |
| 47 | + margin-bottom: $spacing-2xlg; | |
| 48 | + flex-wrap: wrap; | |
| 49 | + gap: $spacing-2xsm; | |
| 50 | + a, | |
| 51 | + button { | |
| 52 | + // min-width: 12rem; | |
| 53 | + height: $form-height-md; | |
| 54 | + padding: 0 $spacing-md; | |
| 55 | + font-weight: $size-font-weight-lg; | |
| 56 | + color:$color-font-default-secondary; | |
| 57 | + background-color: $color-background-default-tertiary; | |
| 58 | + border-radius: $radius-sm; | |
| 59 | + transition: all .3s; | |
| 60 | + &:hover { | |
| 61 | + filter: brightness(95%); | |
| 62 | + } | |
| 63 | + &.is-active { | |
| 64 | + font-weight: $size-font-weight-xlg; | |
| 65 | + color:$color-font-brand-primary-inverse; | |
| 66 | + background-color: $color-background-brand-primary-inverse; | |
| 67 | + } | |
| 68 | + } | |
| 69 | + &.full { | |
| 70 | + display: flex; | |
| 71 | + > li { | |
| 72 | + flex:1; | |
| 73 | + min-width: 0; | |
| 74 | + a, | |
| 75 | + button { | |
| 76 | + min-width: 0; | |
| 77 | + } | |
| 78 | + } | |
| 79 | + } | |
| 80 | +} | |
| 81 | +.tabs-nav-sm { | |
| 82 | + margin-bottom: $spacing-lg; | |
| 83 | + flex-wrap: wrap; | |
| 84 | + gap: $spacing-2xsm; | |
| 85 | + a, | |
| 86 | + button { | |
| 87 | + position: relative; | |
| 88 | + height: 4rem; | |
| 89 | + padding: 0 .8rem; | |
| 90 | + color: $color-font-default-secondary; | |
| 91 | + font-weight: $size-font-weight-xlg; | |
| 92 | + &:hover { | |
| 93 | + filter: brightness(95%); | |
| 94 | + } | |
| 95 | + &.is-active { | |
| 96 | + color: $color-font-brand-primary-base; | |
| 97 | + &:before { | |
| 98 | + content: " "; | |
| 99 | + position: absolute; | |
| 100 | + left: .8rem; | |
| 101 | + right: .8rem; | |
| 102 | + bottom: 0; | |
| 103 | + height: .2rem; | |
| 104 | + background-color: $color-background-brand-primary-inverse; | |
| 105 | + }; | |
| 106 | + } | |
| 107 | + } | |
| 108 | +} | |
| 109 | +.tabs-nav-xsm { | |
| 110 | + margin-bottom: $spacing-xsm !important; | |
| 111 | + display: flex; | |
| 112 | + flex-wrap: wrap; | |
| 113 | + gap: $spacing-2xsm; | |
| 114 | + a, | |
| 115 | + button { | |
| 116 | + display: inline-flex; | |
| 117 | + align-items: center; | |
| 118 | + gap: $spacing-xsm; | |
| 119 | + height: 3.6rem; | |
| 120 | + padding: $spacing-xsm $spacing-md; | |
| 121 | + border-radius: 1.8rem; | |
| 122 | + background-color: $color-background-brand-primary; | |
| 123 | + color: $color-font-brand-primary; | |
| 124 | + font-weight: $size-font-weight-lg; | |
| 125 | + transition: all 0.2s; | |
| 126 | + &:hover { | |
| 127 | + filter: brightness(95%); | |
| 128 | + } | |
| 129 | + i[class^=ico] { | |
| 130 | + &::before { | |
| 131 | + background-color: $color-icon-brand-primary; | |
| 132 | + } | |
| 133 | + | |
| 134 | + } | |
| 135 | + &.is-active { | |
| 136 | + background-color: $color-background-brand-primary-inverse; | |
| 137 | + color: $color-font-default-primary-inverse; | |
| 138 | + i { | |
| 139 | + &::before { | |
| 140 | + background-color: $color-icon-brand-primary-inverse; | |
| 141 | + } | |
| 142 | + } | |
| 143 | + } | |
| 144 | + } | |
| 145 | +} | |
| 146 | +.tabs-nav-img { | |
| 147 | + display: flex; | |
| 148 | + flex-wrap: wrap; | |
| 149 | + gap: $spacing-xsm; | |
| 150 | + margin-bottom: $spacing-md; | |
| 151 | + word-break: keep-all; | |
| 152 | + li { | |
| 153 | + flex-basis: calc((100% - ($spacing-xsm * 4)) / 5); | |
| 154 | + } | |
| 155 | + a, | |
| 156 | + button { | |
| 157 | + display: flex; | |
| 158 | + align-items: center; | |
| 159 | + gap: $spacing-md; | |
| 160 | + border-radius: $radius-md; | |
| 161 | + border: $stroke-primary; | |
| 162 | + padding: $spacing-sm $spacing-lg; | |
| 163 | + height: 10rem; | |
| 164 | + color: $color-gray80; | |
| 165 | + .img-area { | |
| 166 | + width: 4.8rem; | |
| 167 | + height: 4.8rem; | |
| 168 | + img { | |
| 169 | + display: block; | |
| 170 | + width: 100%; | |
| 171 | + } | |
| 172 | + } | |
| 173 | + .txt-area { | |
| 174 | + cite, | |
| 175 | + strong { | |
| 176 | + font-size: $size-font-md; | |
| 177 | + font-weight: $size-font-weight-lg; | |
| 178 | + } | |
| 179 | + } | |
| 180 | + &:hover { | |
| 181 | + background-color: $color-background-default-secondary; | |
| 182 | + } | |
| 183 | + &.is-active { | |
| 184 | + border: 2px solid $spot; | |
| 185 | + .txt-area { | |
| 186 | + color: $color-font-brand-primary; | |
| 187 | + } | |
| 188 | + } | |
| 189 | + } | |
| 190 | +} | |
| 191 | + | |
| 192 | +.tabs-nav-table { | |
| 193 | + display: grid; | |
| 194 | + grid-template-columns: repeat(5, 1fr); | |
| 195 | + border-radius: $radius-sm; | |
| 196 | + overflow: hidden; | |
| 197 | + align-items: center; | |
| 198 | + margin-bottom:$spacing-2xlg; | |
| 199 | + border: $stroke-secondary; | |
| 200 | + border-right:none; | |
| 201 | + border-bottom: none; | |
| 202 | + &.col2 { | |
| 203 | + grid-template-columns: repeat(2, 1fr); | |
| 204 | + margin-bottom: $spacing-md; | |
| 205 | + } | |
| 206 | + li { | |
| 207 | + border-bottom: $stroke-secondary; | |
| 208 | + border-right: $stroke-secondary; | |
| 209 | + height:100%; | |
| 210 | + } | |
| 211 | + a, | |
| 212 | + button { | |
| 213 | + display: flex; | |
| 214 | + align-items: center; | |
| 215 | + justify-content: center; | |
| 216 | + padding:$spacing-xsm; | |
| 217 | + width: 100%; | |
| 218 | + height:100%; | |
| 219 | + min-height: 4rem; | |
| 220 | + text-align: center; | |
| 221 | + font-size:$size-font-xsm; | |
| 222 | + word-break: keep-all; | |
| 223 | + &.is-active, | |
| 224 | + &:hover { | |
| 225 | + background: $gradient-brand-primary; | |
| 226 | + color: $color-font-default-primary-inverse; | |
| 227 | + } | |
| 228 | + } | |
| 229 | +} | |
| 230 | + | |
| 231 | +.tabs-normal .tabs-cont { | |
| 232 | + display: none; | |
| 233 | + &.is-active { | |
| 234 | + display: block; | |
| 235 | + } | |
| 236 | +} | |
| 237 | +.tabs-area { | |
| 238 | + [class^=tabs-nav] { | |
| 239 | + margin-bottom: 0 !important; | |
| 240 | + } | |
| 241 | + .tabs-cont { | |
| 242 | + border-radius: 0px 0px $radius-lg $radius-lg; | |
| 243 | + border-top: $size-stroke-none solid $color-stroke-brand-primary; | |
| 244 | + border-right: $size-stroke-sm solid $color-stroke-brand-primary; | |
| 245 | + border-bottom: $size-stroke-sm solid $color-stroke-brand-primary; | |
| 246 | + border-left: $size-stroke-sm solid $color-stroke-brand-primary; | |
| 247 | + background: $color-background-default-primary; | |
| 248 | + padding:$spacing-lg $spacing-2xlg; | |
| 249 | + .list-type + .pagenation { | |
| 250 | + margin-top:$spacing-section-sm; | |
| 251 | + } | |
| 252 | + } | |
| 253 | + &.spacing-sm { | |
| 254 | + .tabs-cont { | |
| 255 | + padding:$spacing-md $spacing-lg; | |
| 256 | + } | |
| 257 | + } | |
| 258 | +} | |
| 259 | + | |
| 260 | +@include responsive(mobile) { | |
| 261 | + [data-responsive="true"]:root { | |
| 262 | + .tabs-nav-lg { | |
| 263 | + overflow-x: auto; | |
| 264 | + margin-bottom: $spacing-lg; | |
| 265 | + a, button { | |
| 266 | + height: 4.8rem; | |
| 267 | + white-space: nowrap; | |
| 268 | + } | |
| 269 | + } | |
| 270 | + .tabs-nav { | |
| 271 | + flex-wrap: nowrap; | |
| 272 | + overflow-x: auto; | |
| 273 | + button, | |
| 274 | + a { | |
| 275 | + white-space: nowrap; | |
| 276 | + } | |
| 277 | + } | |
| 278 | + .tabs-area { | |
| 279 | + .tabs-cont { | |
| 280 | + padding:$spacing-lg; | |
| 281 | + } | |
| 282 | + } | |
| 283 | + } | |
| 284 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/layout/_layout.scss
... | ... | @@ -0,0 +1,880 @@ |
| 1 | +:root { | |
| 2 | + --logo-width: 8rem; | |
| 3 | + --header-height:12rem; | |
| 4 | + --header-top-height:7.2rem; | |
| 5 | + --header-etc-height:4.8rem; | |
| 6 | + --gnbbar-height:4.8rem; | |
| 7 | + --body-top-spacing:4rem; | |
| 8 | +} | |
| 9 | + | |
| 10 | +.container:not(:has(.header-etc)) { | |
| 11 | + --header-height: 7.2rem; | |
| 12 | +} | |
| 13 | + | |
| 14 | +.container { | |
| 15 | + display: grid; | |
| 16 | + grid-template-rows: auto 1fr; | |
| 17 | + // max-width: 192.0rem; | |
| 18 | + min-width: 76.8rem; | |
| 19 | + min-height: 100%; | |
| 20 | + margin: 0 auto; | |
| 21 | + > * { | |
| 22 | + min-width: 0; | |
| 23 | + } | |
| 24 | + .site-header { | |
| 25 | + position: sticky; | |
| 26 | + // display: flex; | |
| 27 | + // flex-direction: column; | |
| 28 | + // align-items: center; | |
| 29 | + grid-row-start: 1; | |
| 30 | + // position: sticky; | |
| 31 | + z-index: 9; | |
| 32 | + top: 0; | |
| 33 | + width: 100%; | |
| 34 | + background-color: $color-background-default-primary; | |
| 35 | + border-bottom: $size-stroke-xsm solid $color-stroke-default-quaternary; | |
| 36 | + height:var(--header-height); | |
| 37 | + .wrap { | |
| 38 | + width: 100%; | |
| 39 | + @extend %flexArea; | |
| 40 | + align-items: center; | |
| 41 | + > .l-area { | |
| 42 | + // display: flex; | |
| 43 | + gap:$spacing-lg; | |
| 44 | + } | |
| 45 | + > .r-area { | |
| 46 | + flex:none; | |
| 47 | + } | |
| 48 | + } | |
| 49 | + .header-top { | |
| 50 | + position: relative; | |
| 51 | + z-index: 1; | |
| 52 | + height: var(--header-top-height); | |
| 53 | + > .wrap { | |
| 54 | + height:100%; | |
| 55 | + } | |
| 56 | + } | |
| 57 | + h1.logo { | |
| 58 | + position: relative; | |
| 59 | + display: flex; | |
| 60 | + align-items: center; | |
| 61 | + font-size:0; | |
| 62 | + gap:$spacing-2xsm; | |
| 63 | + flex:none; | |
| 64 | + a:not(.txt) { | |
| 65 | + width: var(--logo-width); | |
| 66 | + display: block; | |
| 67 | + height:100%; | |
| 68 | + height: calc(var(--header-top-height) - $spacing-lg); | |
| 69 | + background: url($url-img + 'common/logo/logo_txt.svg') center /contain no-repeat ; | |
| 70 | + } | |
| 71 | + .txt { | |
| 72 | + font-size:2rem; | |
| 73 | + letter-spacing: -0.06em; | |
| 74 | + } | |
| 75 | + } | |
| 76 | + &.is-sticky { | |
| 77 | + border-bottom: $stroke-secondary; | |
| 78 | + } | |
| 79 | + .header-etc { | |
| 80 | + border-top: $size-stroke-xsm solid $color-stroke-default-quaternary; | |
| 81 | + } | |
| 82 | + .gnb { | |
| 83 | + flex:1; | |
| 84 | + > ul { | |
| 85 | + display: flex; | |
| 86 | + flex-wrap: wrap; | |
| 87 | + font-size: $size-font-lg; | |
| 88 | + font-weight: $size-font-weight-lg; | |
| 89 | + gap:0; | |
| 90 | + * { | |
| 91 | + word-break: keep-all; | |
| 92 | + } | |
| 93 | + > li { | |
| 94 | + position: relative; | |
| 95 | + > a, | |
| 96 | + > button { | |
| 97 | + padding: 0 $spacing-lg; | |
| 98 | + display: flex; | |
| 99 | + align-items: center; | |
| 100 | + @include typo ('label-lg','strong'); | |
| 101 | + height: var(--header-etc-height); | |
| 102 | + gap:$spacing-2xsm; | |
| 103 | + &:hover { | |
| 104 | + font-weight: $size-font-weight-xlg; | |
| 105 | + color:$color-font-brand-primary; | |
| 106 | + } | |
| 107 | + } | |
| 108 | + &:first-of-type { | |
| 109 | + >a, | |
| 110 | + >button { | |
| 111 | + padding-left:0; | |
| 112 | + } | |
| 113 | + } | |
| 114 | + &:hover, | |
| 115 | + &.is-active{ | |
| 116 | + >a, | |
| 117 | + >button { | |
| 118 | + &::after { | |
| 119 | + background-color: $color-icon-brand-primary; | |
| 120 | + } | |
| 121 | + } | |
| 122 | + ul { | |
| 123 | + display: grid; | |
| 124 | + } | |
| 125 | + } | |
| 126 | + &:has(ul) { | |
| 127 | + >a, | |
| 128 | + >button { | |
| 129 | + &::after { | |
| 130 | + content: " "; | |
| 131 | + display: inline-block; | |
| 132 | + @include ico($size-icon-sm, chevron-down, $color-icon-default-primary); | |
| 133 | + margin-top: -2px; | |
| 134 | + } | |
| 135 | + | |
| 136 | + } | |
| 137 | + } | |
| 138 | + } | |
| 139 | + ul { | |
| 140 | + display: none; | |
| 141 | + position:absolute; | |
| 142 | + left:50%; | |
| 143 | + transform: translate(-50%); | |
| 144 | + width: 20rem; | |
| 145 | + padding: $spacing-xsm; | |
| 146 | + border-radius: $radius-sm; | |
| 147 | + border: $size-stroke-xsm solid $color-stroke-default-primary; | |
| 148 | + background: $color-background-default-primary; | |
| 149 | + box-shadow: $shadow-md; | |
| 150 | + margin-top: -.1rem; | |
| 151 | + a { | |
| 152 | + display: block; | |
| 153 | + font-size:$size-font-sm; | |
| 154 | + padding:$spacing-xsm $spacing-xsm; | |
| 155 | + text-align: center; | |
| 156 | + color:$color-font-default-secondary; | |
| 157 | + &:hover { | |
| 158 | + color:$color-font-brand-primary; | |
| 159 | + background-color: $color-primary5; | |
| 160 | + } | |
| 161 | + } | |
| 162 | + | |
| 163 | + } | |
| 164 | + } | |
| 165 | + } | |
| 166 | + .user-area { | |
| 167 | + display: flex; | |
| 168 | + align-items: center; | |
| 169 | + gap: $spacing-3xsm; | |
| 170 | + padding: $spacing-xsm; | |
| 171 | + border-radius: $radius-sm; | |
| 172 | + position: relative; | |
| 173 | + white-space: nowrap; | |
| 174 | + .user { | |
| 175 | + display: flex; | |
| 176 | + em { | |
| 177 | + display: block; | |
| 178 | + @include ellipsis(1); | |
| 179 | + max-width:5.6rem; | |
| 180 | + } | |
| 181 | + } | |
| 182 | + .btn-user-fnc-toggle { | |
| 183 | + position: absolute; | |
| 184 | + inset: 0; | |
| 185 | + font-size:0; | |
| 186 | + } | |
| 187 | + &:has(.btn-user-fnc-toggle) { | |
| 188 | + &::after { | |
| 189 | + content: ""; | |
| 190 | + @include ico($size-icon-sm, caret-down, $color-icon-default-secondary); | |
| 191 | + transition: all .2s; | |
| 192 | + } | |
| 193 | + } | |
| 194 | + &:hover { | |
| 195 | + background-color: $color-background-default-secondary; | |
| 196 | + } | |
| 197 | + .profile-tit { | |
| 198 | + display: flex; | |
| 199 | + align-items: center; | |
| 200 | + gap: $spacing-3xsm; | |
| 201 | + em { | |
| 202 | + display: block; | |
| 203 | + @include ellipsis(1); | |
| 204 | + max-width:7.2rem; | |
| 205 | + } | |
| 206 | + } | |
| 207 | + } | |
| 208 | + .util { | |
| 209 | + display: flex; | |
| 210 | + align-items: center; | |
| 211 | + > li { | |
| 212 | + flex:none; | |
| 213 | + >button, | |
| 214 | + >a, | |
| 215 | + .btn-util-toggle { | |
| 216 | + display: flex; | |
| 217 | + flex-direction: column; | |
| 218 | + width: 6.4rem; | |
| 219 | + height: 6.4rem; | |
| 220 | + justify-content: center; | |
| 221 | + align-items: center; | |
| 222 | + line-height: 1.1; | |
| 223 | + gap:$spacing-2xsm; | |
| 224 | + color: $color-font-default-secondary; | |
| 225 | + font-size:$size-font-xsm; | |
| 226 | + &::before { | |
| 227 | + content: " "; | |
| 228 | + } | |
| 229 | + .badge { | |
| 230 | + top: .8rem; | |
| 231 | + right: 2rem; | |
| 232 | + } | |
| 233 | + span:not(.badge) { | |
| 234 | + position: relative; | |
| 235 | + display: flex; | |
| 236 | + width: max-content; | |
| 237 | + justify-content: center; | |
| 238 | + align-items: center; | |
| 239 | + } | |
| 240 | + } | |
| 241 | + } | |
| 242 | + | |
| 243 | + $util-icons: ( | |
| 244 | + "noti": notification,//알림 | |
| 245 | + "note": mail, //쪽지 | |
| 246 | + "shortcut": app, //바로가기 | |
| 247 | + "my": profile, //정보설정 | |
| 248 | + "setting" : setting, //설정 | |
| 249 | + "logout": logout, // 로그아웃 | |
| 250 | + "sch" : search, //검색 | |
| 251 | + "point" : present, //보상 | |
| 252 | + "authority": protect, //교권 | |
| 253 | + "teaset": people,//가정통신문 | |
| 254 | + "notice": megaphone,//가정통신문 | |
| 255 | + "adit": book,//adit | |
| 256 | + ); | |
| 257 | + | |
| 258 | + @each $key, $icon in $util-icons { | |
| 259 | + &-#{$key}::before { | |
| 260 | + @include ico($size-icon-lg, $icon); | |
| 261 | + } | |
| 262 | + } | |
| 263 | + } | |
| 264 | + .util-list, | |
| 265 | + .user-fnc-list { | |
| 266 | + display: none; | |
| 267 | + position: absolute; | |
| 268 | + z-index: 2; | |
| 269 | + top: 5.6rem; | |
| 270 | + right: 0; | |
| 271 | + background-color: $color-background-default-primary; | |
| 272 | + border-radius: $radius-sm; | |
| 273 | + border: $stroke-primary; | |
| 274 | + overflow: hidden; | |
| 275 | + padding: $spacing-2xsm 0; | |
| 276 | + box-shadow: $shadow-md; | |
| 277 | + li { | |
| 278 | + a,button { | |
| 279 | + min-width: 12rem; | |
| 280 | + display: flex; | |
| 281 | + gap: $spacing-xsm; | |
| 282 | + align-items: center; | |
| 283 | + text-align: left; | |
| 284 | + padding: $spacing-xsm; | |
| 285 | + &:hover { | |
| 286 | + background-color: $color-background-brand-primary; | |
| 287 | + } | |
| 288 | + } | |
| 289 | + } | |
| 290 | + } | |
| 291 | + .btn-util-area.is-active, | |
| 292 | + .user-area.is-active { | |
| 293 | + &::after { | |
| 294 | + transform: rotate(-180deg); | |
| 295 | + } | |
| 296 | + .util-list, | |
| 297 | + .user-fnc-list { | |
| 298 | + display: block; | |
| 299 | + animation: opacity .5s forwards; | |
| 300 | + } | |
| 301 | + } | |
| 302 | + .btn-util-area { | |
| 303 | + position: relative; | |
| 304 | + } | |
| 305 | + .btn-util-toggle { | |
| 306 | + span { | |
| 307 | + &::after { | |
| 308 | + content: ""; | |
| 309 | + display: inline-block; | |
| 310 | + @include ico($size-icon-sm, caret-down, $color-icon-default-secondary); | |
| 311 | + transition: all .2s; | |
| 312 | + } | |
| 313 | + } | |
| 314 | + } | |
| 315 | + .util-list { | |
| 316 | + right:auto; | |
| 317 | + left:50%; | |
| 318 | + transform: translateX(-50%); | |
| 319 | + li { | |
| 320 | + a { | |
| 321 | + justify-content: center; | |
| 322 | + } | |
| 323 | + } | |
| 324 | + } | |
| 325 | + .gmenu { | |
| 326 | + position: fixed; | |
| 327 | + z-index: 10; | |
| 328 | + left: 0; | |
| 329 | + right: 0; | |
| 330 | + top: 0; | |
| 331 | + bottom: 0; | |
| 332 | + display: none; | |
| 333 | + pointer-events: none; | |
| 334 | + justify-content: center; | |
| 335 | + align-items: center; | |
| 336 | + background: rgba($color-black, 0.5); | |
| 337 | + backdrop-filter: saturate(200%) blur(2rem); | |
| 338 | + | |
| 339 | + ul { | |
| 340 | + display: grid; | |
| 341 | + grid-template-columns: repeat(3, 1fr); | |
| 342 | + flex-wrap: wrap; | |
| 343 | + justify-content: center; | |
| 344 | + align-items: center; | |
| 345 | + gap: 3.2rem 4rem; | |
| 346 | + max-width: 48rem; | |
| 347 | + width: 100%; | |
| 348 | + li { | |
| 349 | + text-align: center; | |
| 350 | + a { | |
| 351 | + display: block; | |
| 352 | + color: $color-white; | |
| 353 | + text-align: center; | |
| 354 | + word-break: keep-all; | |
| 355 | + font-size: 1.6rem; | |
| 356 | + span { | |
| 357 | + white-space: nowrap; | |
| 358 | + } | |
| 359 | + &::before { | |
| 360 | + content: ''; | |
| 361 | + display: block; | |
| 362 | + margin:0 auto; | |
| 363 | + width: 8rem; | |
| 364 | + aspect-ratio: 1/1; | |
| 365 | + border-radius: 2.4rem; | |
| 366 | + box-sizing: border-box; | |
| 367 | + margin-bottom: 1.2rem; | |
| 368 | + background-color: $color-background-default-primary; | |
| 369 | + background-size: 60%; | |
| 370 | + background-position: center; | |
| 371 | + background-repeat: no-repeat; | |
| 372 | + @include transition(all); | |
| 373 | + } | |
| 374 | + | |
| 375 | + &:hover::before { | |
| 376 | + transform: scale(1.1); | |
| 377 | + } | |
| 378 | + } | |
| 379 | + | |
| 380 | + &.is-current a::before, | |
| 381 | + a:hover::before { | |
| 382 | + background-color: $color-background-default-primary; | |
| 383 | + } | |
| 384 | + | |
| 385 | + $gnbStus: "home", | |
| 386 | + "summary", | |
| 387 | + "emotion", | |
| 388 | + "class", | |
| 389 | + "test", | |
| 390 | + "portfolio", | |
| 391 | + "studyAnalysis", | |
| 392 | + "book", | |
| 393 | + "basictest", | |
| 394 | + "psychology"; | |
| 395 | + | |
| 396 | + @each $stu in $gnbStus { | |
| 397 | + &.gmenu-#{$stu} a::before { | |
| 398 | + background-image: url(../images/gnb-stu/gmenu-#{$stu}.svg); | |
| 399 | + } | |
| 400 | + } | |
| 401 | + } | |
| 402 | + } | |
| 403 | + } | |
| 404 | + button.ico-hamburger { | |
| 405 | + pointer-events: all !important; | |
| 406 | + @include transition(background-color); | |
| 407 | + } | |
| 408 | + &.is-active { | |
| 409 | + button.ico-hamburger { | |
| 410 | + position: fixed; | |
| 411 | + left: 50%; | |
| 412 | + top: calc(50% + 25rem); | |
| 413 | + transform: translate(-50%, 0); | |
| 414 | + z-index: 99; | |
| 415 | + &::before { | |
| 416 | + background-image: url(pathIcon(map-get($icons,"ico-close"), $color-gray60)); | |
| 417 | + } | |
| 418 | + } | |
| 419 | + | |
| 420 | + .gmenu { | |
| 421 | + display: flex; | |
| 422 | + pointer-events: all; | |
| 423 | + animation: fadeIn 0.3s linear forwards; | |
| 424 | + } | |
| 425 | + } | |
| 426 | + | |
| 427 | + /* menu */ | |
| 428 | + .btn-site-menu-open, | |
| 429 | + .btn-site-menu-close { | |
| 430 | + display: flex; | |
| 431 | + align-items: center; | |
| 432 | + justify-content: center; | |
| 433 | + width: 4.8rem; | |
| 434 | + height: 4.8rem; | |
| 435 | + font-size:0; | |
| 436 | + &::before { | |
| 437 | + content: " "; | |
| 438 | + display: block; | |
| 439 | + } | |
| 440 | + } | |
| 441 | + .btn-site-menu-open { | |
| 442 | + position: relative; | |
| 443 | + margin-right: -1.2rem; | |
| 444 | + &::before { | |
| 445 | + @include ico($size-icon-lg,'menu',$color-icon-default-primary); | |
| 446 | + } | |
| 447 | + } | |
| 448 | + .btn-site-menu-close { | |
| 449 | + position: absolute; | |
| 450 | + top:$spacing-sm; | |
| 451 | + right:$spacing-xsm; | |
| 452 | + &::before { | |
| 453 | + @include ico($size-icon-lg,'close',$color-icon-default-primary); | |
| 454 | + } | |
| 455 | + } | |
| 456 | + .site-menu-area { | |
| 457 | + $site-menu-gap: 2rem; | |
| 458 | + position: fixed; | |
| 459 | + inset: 0; | |
| 460 | + // display 대신 opacity와 pointer-events 사용 | |
| 461 | + opacity: 0; | |
| 462 | + pointer-events: none; | |
| 463 | + transition: opacity 0.3s ease; | |
| 464 | + | |
| 465 | + &.is-active { | |
| 466 | + opacity: 1; | |
| 467 | + pointer-events: auto; | |
| 468 | + } | |
| 469 | + | |
| 470 | + &::before { | |
| 471 | + content: ""; | |
| 472 | + position: absolute; | |
| 473 | + inset: 0; | |
| 474 | + z-index: -1; | |
| 475 | + background-color: $color-background-alpha-primary-inverse; | |
| 476 | + } | |
| 477 | + | |
| 478 | + .site-menu { | |
| 479 | + position: absolute; | |
| 480 | + right: 0; | |
| 481 | + top: 0; | |
| 482 | + height: 100%; | |
| 483 | + max-width: 37.5rem; | |
| 484 | + width: 100%; | |
| 485 | + padding-top: 6rem; | |
| 486 | + background-color: $color-background-default-primary; | |
| 487 | + display: grid; | |
| 488 | + grid-template-rows: auto 1fr; | |
| 489 | + transition: transform 0.3s ease; | |
| 490 | + transform: translateX(100%); | |
| 491 | + } | |
| 492 | + | |
| 493 | + &.is-active .site-menu { | |
| 494 | + transform: translateX(0); | |
| 495 | + } | |
| 496 | + .menu-header, | |
| 497 | + .menu-body { | |
| 498 | + padding-left:$site-menu-gap; | |
| 499 | + padding-right:$site-menu-gap; | |
| 500 | + } | |
| 501 | + .menu-header { | |
| 502 | + position:relative; | |
| 503 | + z-index:1; | |
| 504 | + display: grid; | |
| 505 | + gap:$spacing-sm; | |
| 506 | + padding-bottom:$spacing-md; | |
| 507 | + } | |
| 508 | + .menu-body { | |
| 509 | + overflow-y: auto; | |
| 510 | + border-top:$spacing-2xsm solid $color-background-default-tertiary; | |
| 511 | + padding-top:$spacing-xsm; | |
| 512 | + padding-bottom: $spacing-xsm; | |
| 513 | + } | |
| 514 | + .menu-info { | |
| 515 | + @extend %flexArea; | |
| 516 | + } | |
| 517 | + .menu-util { | |
| 518 | + border-top:$stroke-secondary; | |
| 519 | + padding-top: $spacing-md; | |
| 520 | + .util { | |
| 521 | + align-items: flex-start; | |
| 522 | + gap:8px; | |
| 523 | + // display: grid; | |
| 524 | + // grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); | |
| 525 | + > li { | |
| 526 | + flex:1; | |
| 527 | + display: grid; | |
| 528 | + justify-content: center; | |
| 529 | + >button, | |
| 530 | + >a, | |
| 531 | + .btn-util-toggle { | |
| 532 | + width: 100%; | |
| 533 | + justify-content: flex-start; | |
| 534 | + .badge { | |
| 535 | + top: 0; | |
| 536 | + right:0; | |
| 537 | + } | |
| 538 | + | |
| 539 | + span:not(.badge) { | |
| 540 | + flex-wrap: wrap; | |
| 541 | + width: 100%; | |
| 542 | + text-align: center; | |
| 543 | + align-items: flex-start; | |
| 544 | + } | |
| 545 | + } | |
| 546 | + } | |
| 547 | + } | |
| 548 | + } | |
| 549 | + .btn-login { | |
| 550 | + display: flex; | |
| 551 | + gap:$spacing-xsm; | |
| 552 | + color:$color-font-brand-primary-base; | |
| 553 | + align-items: center; | |
| 554 | + @include typo('tit-lg'); | |
| 555 | + &::before { | |
| 556 | + content: " "; | |
| 557 | + @include ico($size-icon-lg,'login',$color-icon-brand-primary); | |
| 558 | + } | |
| 559 | + } | |
| 560 | + .menu { | |
| 561 | + li { | |
| 562 | + position: relative; | |
| 563 | + } | |
| 564 | + > li { | |
| 565 | + >a, | |
| 566 | + >button { | |
| 567 | + display:block; | |
| 568 | + color: $color-font-default-primary; | |
| 569 | + @include typo("tit-md"); | |
| 570 | + padding:$spacing-md 0; | |
| 571 | + border-bottom: $size-stroke-xsm solid $color-stroke-default-primary; | |
| 572 | + } | |
| 573 | + > ul { | |
| 574 | + margin-top:$spacing-xsm; | |
| 575 | + >li { | |
| 576 | + >a, | |
| 577 | + >button { | |
| 578 | + display: block; | |
| 579 | + padding:$spacing-sm; | |
| 580 | + @include typo('label-lg'); | |
| 581 | + } | |
| 582 | + &:has(>ul) { | |
| 583 | + >a, | |
| 584 | + >button { | |
| 585 | + padding-right:calc($spacing-sm + $size-icon-md + $spacing-2xsm); | |
| 586 | + } | |
| 587 | + &::after { | |
| 588 | + content: " "; | |
| 589 | + position: absolute; | |
| 590 | + right:$spacing-sm; | |
| 591 | + top:$spacing-sm; | |
| 592 | + @include ico($size-icon-md,'chevron-down', $color-icon-default-secondary); | |
| 593 | + transition: all .3s; | |
| 594 | + } | |
| 595 | + } | |
| 596 | + &.is-active { | |
| 597 | + >ul { | |
| 598 | + display: block; | |
| 599 | + } | |
| 600 | + &::after { | |
| 601 | + transform: rotate(-180deg); | |
| 602 | + } | |
| 603 | + } | |
| 604 | + > ul { | |
| 605 | + display: none; | |
| 606 | + padding-top: $spacing-xsm; | |
| 607 | + padding-bottom: $spacing-xsm; | |
| 608 | + background-color: $color-background-default-secondary; | |
| 609 | + border-radius: $radius-sm; | |
| 610 | + > li { | |
| 611 | + >a, | |
| 612 | + >button { | |
| 613 | + display:flex; | |
| 614 | + align-items: center; | |
| 615 | + @include typo('label-md'); | |
| 616 | + padding:$spacing-sm $spacing-md; | |
| 617 | + gap:$spacing-xsm; | |
| 618 | + &::before { | |
| 619 | + content: ""; | |
| 620 | + display: block; | |
| 621 | + width: .4rem; | |
| 622 | + height: .4rem; | |
| 623 | + border-radius: $radius-full; | |
| 624 | + background-color: $color-icon-default-secondary; | |
| 625 | + } | |
| 626 | + | |
| 627 | + } | |
| 628 | + } | |
| 629 | + } | |
| 630 | + } | |
| 631 | + } | |
| 632 | + } | |
| 633 | + | |
| 634 | + } | |
| 635 | + } | |
| 636 | + } | |
| 637 | + .site-body { | |
| 638 | + // padding-top: calc(var(--body-top-spacing) + var(--header-height)); | |
| 639 | + padding-top:var(--body-top-spacing); | |
| 640 | + padding-bottom: $spacing-section-md; | |
| 641 | + } | |
| 642 | + .site-footer { | |
| 643 | + position: relative; | |
| 644 | + background-color: $color-background-default-secondary; | |
| 645 | + padding:$spacing-lg 0; | |
| 646 | + // margin-top:$spacing-xlg; | |
| 647 | + .wrap { | |
| 648 | + position: relative; | |
| 649 | + } | |
| 650 | + .cs { | |
| 651 | + position: absolute; | |
| 652 | + right:$size-wrap-spacing; | |
| 653 | + top:0; | |
| 654 | + display: flex; | |
| 655 | + gap: $spacing-xsm; | |
| 656 | + align-items: center; | |
| 657 | + i { | |
| 658 | + position: relative; | |
| 659 | + display: block; | |
| 660 | + width: 4.8rem; | |
| 661 | + height: 4.8rem; | |
| 662 | + background-color: $color-background-default-primary; | |
| 663 | + border-radius: 50%; | |
| 664 | + &::before { | |
| 665 | + content: " "; | |
| 666 | + position: absolute; | |
| 667 | + left:50%; | |
| 668 | + top:50%; | |
| 669 | + transform: translate(-50%, -50%); | |
| 670 | + @include ico($size-icon-md, call, $color-icon-brand-secondary); | |
| 671 | + } | |
| 672 | + } | |
| 673 | + .tel { | |
| 674 | + strong, | |
| 675 | + cite { | |
| 676 | + display: block; | |
| 677 | + @include typo('tit-xsm'); | |
| 678 | + text-align: center; | |
| 679 | + } | |
| 680 | + a { | |
| 681 | + display: block; | |
| 682 | + @include typo('tit-md'); | |
| 683 | + color:$color-font-brand-secondary; | |
| 684 | + text-align: center; | |
| 685 | + } | |
| 686 | + } | |
| 687 | + .info { | |
| 688 | + span { | |
| 689 | + display: block; | |
| 690 | + @include typo('body-sm'); | |
| 691 | + } | |
| 692 | + | |
| 693 | + } | |
| 694 | + } | |
| 695 | + .foooter-menu { | |
| 696 | + display: flex; | |
| 697 | + flex-wrap: wrap; | |
| 698 | + gap: $spacing-sm; | |
| 699 | + margin-bottom: $spacing-lg; | |
| 700 | + a:hover { | |
| 701 | + color:$color-font-info-primary; | |
| 702 | + } | |
| 703 | + } | |
| 704 | + .footer-info { | |
| 705 | + display: flex; | |
| 706 | + gap:$spacing-md; | |
| 707 | + // figure { | |
| 708 | + // order:1; | |
| 709 | + // } | |
| 710 | + .txt-area { | |
| 711 | + @include typo('body-sm'); | |
| 712 | + color:$color-font-default-tertiary; | |
| 713 | + } | |
| 714 | + } | |
| 715 | + } | |
| 716 | + | |
| 717 | +} | |
| 718 | + | |
| 719 | +// site-float-area | |
| 720 | +.site-float-area { | |
| 721 | + position: fixed; | |
| 722 | + display:flex; | |
| 723 | + flex-direction: column; | |
| 724 | + gap:$spacing-2xsm; | |
| 725 | + bottom:$spacing-lg; | |
| 726 | + right:$spacing-lg; | |
| 727 | + z-index: 99; | |
| 728 | + [class^=btn-float] { | |
| 729 | + display: block; | |
| 730 | + width: 5.6rem; | |
| 731 | + aspect-ratio: 1; | |
| 732 | + background-size: contain; | |
| 733 | + background-repeat: no-repeat; | |
| 734 | + background-position: center center; | |
| 735 | + font-size:0; | |
| 736 | + } | |
| 737 | + .btn-float { | |
| 738 | + @each $type, $file in ( | |
| 739 | + top : "top", | |
| 740 | + chatbot: "chatbot", //챗봇 | |
| 741 | + control: "control", //제어수업 | |
| 742 | + ){ | |
| 743 | + &-#{$type} { | |
| 744 | + background-image: url($url-img + 'common/btn-float/btn-float-#{$file}.svg'); | |
| 745 | + } | |
| 746 | + } | |
| 747 | + } | |
| 748 | +} | |
| 749 | + | |
| 750 | +/* sub */ | |
| 751 | +.snb { | |
| 752 | + display: flex; | |
| 753 | + width: fit-content; | |
| 754 | + border-radius: 2em; | |
| 755 | + background: $color-background-default-secondary; | |
| 756 | + padding:0 $spacing-xsm; | |
| 757 | + margin-bottom: $spacing-2xlg; | |
| 758 | + word-break: keep-all; | |
| 759 | + text-align: center; | |
| 760 | + overflow: auto; | |
| 761 | + max-width: 100%; | |
| 762 | + a { | |
| 763 | + display: flex; | |
| 764 | + align-items: center; | |
| 765 | + padding:$spacing-md; | |
| 766 | + color: $color-font-disabled-primary; | |
| 767 | + font-size: $size-font-lg; | |
| 768 | + font-weight: $size-font-weight-lg; | |
| 769 | + white-space: nowrap; | |
| 770 | + &.is-current { | |
| 771 | + color: $color-font-default-primary; | |
| 772 | + font-weight: $size-font-weight-xlg; | |
| 773 | + } | |
| 774 | + } | |
| 775 | + li { | |
| 776 | + display: flex; | |
| 777 | + align-items: center; | |
| 778 | + &::before { | |
| 779 | + content: " "; | |
| 780 | + display:block; | |
| 781 | + width: .1rem; | |
| 782 | + height: 1.6rem; | |
| 783 | + background: $color-stroke-default-tertiary; | |
| 784 | + } | |
| 785 | + &:first-of-type { | |
| 786 | + &::before { | |
| 787 | + display: none; | |
| 788 | + } | |
| 789 | + } | |
| 790 | + } | |
| 791 | +} | |
| 792 | +// @media (pointer:coarse) { | |
| 793 | +// .snb { | |
| 794 | +// scrollbar-width: none; | |
| 795 | +// /* Firefox */ | |
| 796 | +// } | |
| 797 | + | |
| 798 | +// .snb::-webkit-scrollbar { | |
| 799 | +// display: none; | |
| 800 | +// } | |
| 801 | +// } | |
| 802 | + | |
| 803 | +[data-responsive="true"] { | |
| 804 | + .container { | |
| 805 | + min-width: auto; | |
| 806 | + } | |
| 807 | +} | |
| 808 | + | |
| 809 | +@include responsive(tablet) { | |
| 810 | + :root { | |
| 811 | + --logo-width: 4.8rem; | |
| 812 | + --header-height:5.6rem; | |
| 813 | + --header-top-height:5.6rem; | |
| 814 | + } | |
| 815 | + .container:not(:has(.header-etc)) { | |
| 816 | + --header-height: 5.6rem; | |
| 817 | + } | |
| 818 | + .container { | |
| 819 | + .site-header { | |
| 820 | + h1.logo { | |
| 821 | + .txt { | |
| 822 | + @include typo('tit-sm'); | |
| 823 | + } | |
| 824 | + } | |
| 825 | + .header-etc { | |
| 826 | + display: none; | |
| 827 | + } | |
| 828 | + } | |
| 829 | + } | |
| 830 | +} | |
| 831 | + | |
| 832 | +@include responsive(mobile) { | |
| 833 | + //반응형 true | |
| 834 | + [data-responsive="true"] { | |
| 835 | + .container { | |
| 836 | + .site-footer { | |
| 837 | + .wrap { | |
| 838 | + display: flex; | |
| 839 | + flex-direction: column; | |
| 840 | + gap:$spacing-md; | |
| 841 | + > * { | |
| 842 | + margin:0; | |
| 843 | + flex-wrap: wrap; | |
| 844 | + } | |
| 845 | + } | |
| 846 | + .cs { | |
| 847 | + position: static; | |
| 848 | + order:0; | |
| 849 | + } | |
| 850 | + .foooter-menu { | |
| 851 | + order:1; | |
| 852 | + } | |
| 853 | + .footer-info { | |
| 854 | + order:2; | |
| 855 | + flex-direction: column; | |
| 856 | + } | |
| 857 | + } | |
| 858 | + } | |
| 859 | + } | |
| 860 | +} | |
| 861 | + | |
| 862 | +@include responsive(mobileSm) { | |
| 863 | + .container { | |
| 864 | + .site-header { | |
| 865 | + h1.logo { | |
| 866 | + .txt { | |
| 867 | + @include typo('tit-sm'); | |
| 868 | + } | |
| 869 | + } | |
| 870 | + .header-etc { | |
| 871 | + display: none; | |
| 872 | + } | |
| 873 | + } | |
| 874 | + } | |
| 875 | + .site-menu-area { | |
| 876 | + .site-menu { | |
| 877 | + max-width: 100%; | |
| 878 | + } | |
| 879 | + } | |
| 880 | +} |
+++ resources/front/site/SITE_00000/css/common/module/_agendar.scss
... | ... | @@ -0,0 +1,259 @@ |
| 1 | + | |
| 2 | +// 알림장 | |
| 3 | +.agendar-list { | |
| 4 | + display: grid; | |
| 5 | + grid-template-columns: repeat(3, 1fr); | |
| 6 | + gap:$spacing-lg; | |
| 7 | + > li { | |
| 8 | + position: relative; | |
| 9 | + display: grid; | |
| 10 | + border:$stroke-secondary; | |
| 11 | + border-radius: $radius-md; | |
| 12 | + padding:$spacing-md; | |
| 13 | + height: 100%; | |
| 14 | + gap:$spacing-xsm; | |
| 15 | + &.is-disabled { | |
| 16 | + .agendar-tit { | |
| 17 | + color: $color-font-disabled-primary; | |
| 18 | + &::before { | |
| 19 | + @include ico-set($color-icon-disabled-primary, $size-icon-md); | |
| 20 | + mask-image: url(pathIcon(map-get($icons,ico-lock))); | |
| 21 | + } | |
| 22 | + } | |
| 23 | + } | |
| 24 | + } | |
| 25 | + .lnk-full { | |
| 26 | + opacity: 1; | |
| 27 | + text-indent: 0; | |
| 28 | + span { | |
| 29 | + display: none; | |
| 30 | + } | |
| 31 | + &:hover { | |
| 32 | + span { | |
| 33 | + position:absolute; | |
| 34 | + top:50%; | |
| 35 | + left:50%; | |
| 36 | + transform: translate(-50%, -50%); | |
| 37 | + display: flex; | |
| 38 | + flex-direction: column; | |
| 39 | + align-items: center; | |
| 40 | + justify-content: center; | |
| 41 | + gap:$spacing-2xsm; | |
| 42 | + width: 10rem; | |
| 43 | + aspect-ratio: 1; | |
| 44 | + border-radius: $radius-full; | |
| 45 | + background: $color-background-alpha-primary-inverse; | |
| 46 | + backdrop-filter: blur(4px); | |
| 47 | + color: $color-font-default-primary-inverse; | |
| 48 | + font-size:$size-font-sm; | |
| 49 | + animation: opacityUp .4s forwards; | |
| 50 | + &::before { | |
| 51 | + content: " "; | |
| 52 | + display: block; | |
| 53 | + @include ico-set($color-icon-default-primary-inverse, $size-icon-md); | |
| 54 | + mask-image: url(pathIcon(map-get($icons,ico-openinnew))); | |
| 55 | + } | |
| 56 | + } | |
| 57 | + } | |
| 58 | + } | |
| 59 | + .agendar-tit-area { | |
| 60 | + position: relative; | |
| 61 | + display: flex; | |
| 62 | + justify-content: space-between; | |
| 63 | + min-width: 0; | |
| 64 | + >.l-area, | |
| 65 | + >.r-area { | |
| 66 | + min-width: 0; | |
| 67 | + } | |
| 68 | + >.r-area { | |
| 69 | + flex:none; | |
| 70 | + } | |
| 71 | + } | |
| 72 | + .agendar-tit { | |
| 73 | + @include typo('tit-md'); | |
| 74 | + &::before { | |
| 75 | + content: " "; | |
| 76 | + display: inline-block; | |
| 77 | + vertical-align: middle; | |
| 78 | + margin-right: $spacing-2xsm; | |
| 79 | + @include ico-set($color-icon-default-primary, $size-icon-md); | |
| 80 | + mask-image: url(pathIcon(map-get($icons,ico-notification))); | |
| 81 | + } | |
| 82 | + } | |
| 83 | + .agend-item-tit { | |
| 84 | + font-weight: $size-font-weight-lg; | |
| 85 | + @include ellipsis(1); | |
| 86 | + margin-top: $spacing-3xsm; | |
| 87 | + } | |
| 88 | + .etc-fnc-area { | |
| 89 | + z-index: 4; | |
| 90 | + } | |
| 91 | + .agendar-txt-area { | |
| 92 | + position: relative; | |
| 93 | + display: flex; | |
| 94 | + flex-direction: column; | |
| 95 | + gap:$spacing-sm; | |
| 96 | + background-color: $color-green5; | |
| 97 | + padding:$spacing-md; | |
| 98 | + height: 24rem; | |
| 99 | + overflow: hidden; | |
| 100 | + border-radius: $radius-sm; | |
| 101 | + flex:1; | |
| 102 | + .item-list-box { | |
| 103 | + flex:none; | |
| 104 | + } | |
| 105 | + img { | |
| 106 | + max-width: 100%; | |
| 107 | + } | |
| 108 | + &::after { | |
| 109 | + content: ""; | |
| 110 | + position: absolute; | |
| 111 | + width: 100%; | |
| 112 | + bottom:0; | |
| 113 | + left:0; | |
| 114 | + height: 4.8rem; | |
| 115 | + background: linear-gradient(0deg, $color-green5 0% ,$color-transparent 100%); | |
| 116 | + } | |
| 117 | + } | |
| 118 | + .agendar-etc { | |
| 119 | + display: flex; | |
| 120 | + justify-content: space-between; | |
| 121 | + flex-wrap: wrap; | |
| 122 | + } | |
| 123 | +} | |
| 124 | +.agenda-area { | |
| 125 | + padding-top:$spacing-2xlg; | |
| 126 | + padding-bottom:$spacing-2xlg; | |
| 127 | +} | |
| 128 | +.agendar-view-area { | |
| 129 | + position: relative; | |
| 130 | + display: grid; | |
| 131 | + border:$stroke-secondary; | |
| 132 | + border-radius: $radius-md; | |
| 133 | + padding:$spacing-md; | |
| 134 | + height: 100%; | |
| 135 | + gap:$spacing-xsm; | |
| 136 | + .agendar-tit-area { | |
| 137 | + @extend %flexArea; | |
| 138 | + } | |
| 139 | + .agendar-tit { | |
| 140 | + @include typo('tit-md'); | |
| 141 | + &::before { | |
| 142 | + content: " "; | |
| 143 | + display: inline-block; | |
| 144 | + vertical-align: middle; | |
| 145 | + margin-right: $spacing-xsm; | |
| 146 | + @include ico-set($color-icon-default-primary, $size-icon-md); | |
| 147 | + mask-image: url(pathIcon(map-get($icons,ico-notification))); | |
| 148 | + } | |
| 149 | + } | |
| 150 | + .agendar-item-tit { | |
| 151 | + @include typo('tit-md'); | |
| 152 | + margin-bottom: $spacing-xsm; | |
| 153 | + } | |
| 154 | + .etc-fnc-area { | |
| 155 | + z-index: 4; | |
| 156 | + } | |
| 157 | + .agendar-txt-area { | |
| 158 | + position: relative; | |
| 159 | + display: flex; | |
| 160 | + flex-direction: column; | |
| 161 | + gap:$spacing-sm; | |
| 162 | + background-color: $color-green5; | |
| 163 | + padding:$spacing-lg $spacing-2xlg; | |
| 164 | + min-height: 4rem; | |
| 165 | + overflow: hidden; | |
| 166 | + border-radius: $radius-md; | |
| 167 | + border: $size-stroke-sm solid $color-green10; | |
| 168 | + flex:1; | |
| 169 | + .item-list-box { | |
| 170 | + flex:none; | |
| 171 | + } | |
| 172 | + img { | |
| 173 | + max-width: 100%; | |
| 174 | + } | |
| 175 | + } | |
| 176 | + .agendar-survey-area { | |
| 177 | + display: flex; | |
| 178 | + align-items: center; | |
| 179 | + align-self: stretch; | |
| 180 | + padding: $spacing-sm $spacing-lg; | |
| 181 | + border-radius: $radius-md; | |
| 182 | + border: $size-stroke-xsm solid $color-stroke-brand-accent; | |
| 183 | + background: $color-background-default-primary; | |
| 184 | + .l-area { | |
| 185 | + display: flex; | |
| 186 | + gap: $spacing-md; | |
| 187 | + align-items: center; | |
| 188 | + flex: 1; | |
| 189 | + figure { | |
| 190 | + img { | |
| 191 | + display: block; | |
| 192 | + width: 5.6rem; | |
| 193 | + height: 5.6rem; | |
| 194 | + } | |
| 195 | + } | |
| 196 | + .txt-area { | |
| 197 | + flex: 1; | |
| 198 | + display: flex; | |
| 199 | + flex-direction: column; | |
| 200 | + strong { | |
| 201 | + @include typo('tit-md'); | |
| 202 | + } | |
| 203 | + small { | |
| 204 | + color: $color-font-default-secondary; | |
| 205 | + } | |
| 206 | + } | |
| 207 | + } | |
| 208 | + } | |
| 209 | + .cont-list { | |
| 210 | + display: flex; | |
| 211 | + flex-direction: column; | |
| 212 | + gap:$spacing-xsm; | |
| 213 | + .iframe-area { | |
| 214 | + width: 100%; | |
| 215 | + aspect-ratio: 1/ .8; | |
| 216 | + border:$stroke-secondary; | |
| 217 | + iframe { | |
| 218 | + width: 100%; | |
| 219 | + height:100%; | |
| 220 | + } | |
| 221 | + } | |
| 222 | + } | |
| 223 | +} | |
| 224 | +@include responsive(tabletSm) { | |
| 225 | + .agendar-list { | |
| 226 | + grid-template-columns: repeat(2, 1fr); | |
| 227 | + } | |
| 228 | +} | |
| 229 | + | |
| 230 | +@include responsive(mobile) { | |
| 231 | + .agendar-list { | |
| 232 | + grid-template-columns: repeat(1, 1fr); | |
| 233 | + } | |
| 234 | + .agendar-tit-area { | |
| 235 | + flex-direction: column; | |
| 236 | + .r-area { | |
| 237 | + order:0; | |
| 238 | + } | |
| 239 | + .l-area { | |
| 240 | + order:1; | |
| 241 | + } | |
| 242 | + .etc-fnc-area { | |
| 243 | + position: absolute; | |
| 244 | + right:0; | |
| 245 | + top:.4rem; | |
| 246 | + } | |
| 247 | + } | |
| 248 | + .agendar-view-area { | |
| 249 | + padding:0; | |
| 250 | + border:none; | |
| 251 | + .agendar-txt-area { | |
| 252 | + padding:$spacing-md; | |
| 253 | + } | |
| 254 | + .agendar-survey-area { | |
| 255 | + flex-direction: column; | |
| 256 | + gap: $spacing-sm; | |
| 257 | + } | |
| 258 | + } | |
| 259 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/module/_error.scss
... | ... | @@ -0,0 +1,26 @@ |
| 1 | +.error-area { | |
| 2 | + display: flex; | |
| 3 | + flex-direction: column; | |
| 4 | + justify-content: center; | |
| 5 | + align-items: center; | |
| 6 | + text-align: center; | |
| 7 | + padding: 12rem 0; | |
| 8 | + figure { | |
| 9 | + img { | |
| 10 | + margin-bottom: $spacing-md; | |
| 11 | + } | |
| 12 | + } | |
| 13 | + h2 { | |
| 14 | + font-size: 2.8rem; | |
| 15 | + font-weight: 400; | |
| 16 | + color: $color-gray80; | |
| 17 | + margin-bottom: $spacing-xsm; | |
| 18 | + } | |
| 19 | + p { | |
| 20 | + color: $color-font-default-tertiary; | |
| 21 | + } | |
| 22 | + .btn-cont { | |
| 23 | + margin-top: $spacing-3xlg; | |
| 24 | + margin-bottom: 0; | |
| 25 | + } | |
| 26 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/module/_formArea.scss
... | ... | @@ -0,0 +1,326 @@ |
| 1 | +.form-write, | |
| 2 | +.form-view-result, | |
| 3 | +.form-view { | |
| 4 | + display: grid; | |
| 5 | + gap:$spacing-lg; | |
| 6 | + img { | |
| 7 | + max-width: 100%; | |
| 8 | + } | |
| 9 | + .form-section-header { | |
| 10 | + .editor-cont { | |
| 11 | + width: 100%; | |
| 12 | + } | |
| 13 | + } | |
| 14 | + .form-section-body { | |
| 15 | + // max-width: 80rem; | |
| 16 | + // width: 100%; | |
| 17 | + // margin:0 auto; | |
| 18 | + } | |
| 19 | + .form-section-footer { | |
| 20 | + width: calc(100% + ($spacing-lg * 2)); | |
| 21 | + margin-left:-$spacing-lg; | |
| 22 | + margin-bottom:-$spacing-lg; | |
| 23 | + border:$stroke-secondary; | |
| 24 | + background: $color-background-default-primary; | |
| 25 | + border-radius: 0 0 $radius-md $radius-md; | |
| 26 | + padding:$spacing-xsm $spacing-md; | |
| 27 | + @extend %flexArea; | |
| 28 | + } | |
| 29 | + .form-section { | |
| 30 | + display: grid; | |
| 31 | + gap:$spacing-lg; | |
| 32 | + } | |
| 33 | + .form-item-list { | |
| 34 | + display:grid; | |
| 35 | + gap:$spacing-md; | |
| 36 | + } | |
| 37 | + .form-item { | |
| 38 | + position: relative; | |
| 39 | + display: grid; | |
| 40 | + gap:$spacing-md; | |
| 41 | + border-radius: $radius-md; | |
| 42 | + border: $stroke-secondary; | |
| 43 | + background: $color-background-default-primary; | |
| 44 | + padding:$spacing-lg; | |
| 45 | + } | |
| 46 | + .q-area { | |
| 47 | + display: grid; | |
| 48 | + gap:$spacing-md; | |
| 49 | + } | |
| 50 | + .form-item-section { | |
| 51 | + margin-bottom: $spacing-2xlg; | |
| 52 | + &:last-of-type { | |
| 53 | + margin-bottom: 0; | |
| 54 | + } | |
| 55 | + } | |
| 56 | + .form-item-tit { | |
| 57 | + display: flex; | |
| 58 | + align-items: center; | |
| 59 | + @include typo('tit-lg'); | |
| 60 | + margin-bottom: $spacing-md; | |
| 61 | + gap:$spacing-xsm; | |
| 62 | + &::after { | |
| 63 | + content: " "; | |
| 64 | + display:block; | |
| 65 | + flex:1; | |
| 66 | + height: 1px; | |
| 67 | + background-color: $color-stroke-default-secondary; | |
| 68 | + } | |
| 69 | + } | |
| 70 | +} | |
| 71 | +.form-write { | |
| 72 | + $form-tit-height:6.4rem; | |
| 73 | + .form-section { | |
| 74 | + &:has(.form-section-header) { | |
| 75 | + margin-top:$form-tit-height; | |
| 76 | + border-radius:0 $radius-md $radius-md $radius-md; | |
| 77 | + } | |
| 78 | + } | |
| 79 | + .form-section-header { | |
| 80 | + position:absolute; | |
| 81 | + display: inline-flex; | |
| 82 | + align-items:center; | |
| 83 | + padding-right: $spacing-lg; | |
| 84 | + gap:$spacing-xsm; | |
| 85 | + top:-$form-tit-height; | |
| 86 | + height: $form-tit-height; | |
| 87 | + border-radius: $radius-md $radius-md $radius-none $radius-none; | |
| 88 | + background: $color-background-brand-primary-inverse; | |
| 89 | + color:$color-font-default-primary-inverse; | |
| 90 | + &::after { | |
| 91 | + content: " "; | |
| 92 | + display: inline-block; | |
| 93 | + @include ico($size-icon-md, edit, $color-icon-default-secondary-inverse); | |
| 94 | + } | |
| 95 | + input { | |
| 96 | + height:$form-tit-height; | |
| 97 | + border:none; | |
| 98 | + background-color:initial; | |
| 99 | + max-width: 32rem; | |
| 100 | + width:100%; | |
| 101 | + min-width: 0; | |
| 102 | + @include typo ('tit-md'); | |
| 103 | + &:focus { | |
| 104 | + box-shadow:none; | |
| 105 | + } | |
| 106 | + &::placeholder { | |
| 107 | + color: $color-font-default-quaternary-inverse; | |
| 108 | + } | |
| 109 | + } | |
| 110 | + } | |
| 111 | + .form-item { | |
| 112 | + .q-tit { | |
| 113 | + display: flex; | |
| 114 | + flex-wrap: wrap; | |
| 115 | + gap:$spacing-2xsm; | |
| 116 | + input { | |
| 117 | + flex:1; | |
| 118 | + } | |
| 119 | + } | |
| 120 | + input[type=text], | |
| 121 | + input[type=search], | |
| 122 | + input[type=password], | |
| 123 | + input[type=number], | |
| 124 | + input[type=email], | |
| 125 | + input[type=tel], | |
| 126 | + input[type=time], | |
| 127 | + input[type=date], | |
| 128 | + input[type=datetime-local], | |
| 129 | + input[type=month], | |
| 130 | + input[type=week] { | |
| 131 | + min-width: 0; | |
| 132 | + } | |
| 133 | + .q-img { | |
| 134 | + } | |
| 135 | + .form-item-fnc { | |
| 136 | + @extend %flexArea; | |
| 137 | + flex-wrap: wrap; | |
| 138 | + .toggle { | |
| 139 | + margin-right: 0; | |
| 140 | + } | |
| 141 | + } | |
| 142 | + &::before { | |
| 143 | + content: " "; | |
| 144 | + display: none; | |
| 145 | + position: absolute; | |
| 146 | + width: 3.2rem; | |
| 147 | + height: 4rem; | |
| 148 | + top:$spacing-lg; | |
| 149 | + left:-3.2rem; | |
| 150 | + border-radius: $radius-sm 0 0 $radius-sm; | |
| 151 | + background: $color-background-brand-primary-inverse; | |
| 152 | + } | |
| 153 | + &::after { | |
| 154 | + content: " "; | |
| 155 | + display: none; | |
| 156 | + position: absolute; | |
| 157 | + top:calc($spacing-lg + .8rem); | |
| 158 | + left:-2.4rem; | |
| 159 | + @include ico($size-icon-md, move, $color-icon-default-primary-inverse); | |
| 160 | + } | |
| 161 | + | |
| 162 | + &.ui-sortable-handle:hover { | |
| 163 | + border-color: initial; | |
| 164 | + outline: $size-stroke-xsm solid $color-stroke-brand-primary; | |
| 165 | + &::before, | |
| 166 | + &::after { | |
| 167 | + display: block; | |
| 168 | + } | |
| 169 | + } | |
| 170 | + | |
| 171 | + &.ui-sortable-helper { | |
| 172 | + opacity: .8; | |
| 173 | + cursor: move; | |
| 174 | + border-color: initial; | |
| 175 | + outline: $size-stroke-xsm dashed $color-stroke-brand-primary; | |
| 176 | + &::before, | |
| 177 | + &::after { | |
| 178 | + display: block; | |
| 179 | + } | |
| 180 | + } | |
| 181 | + } | |
| 182 | +} | |
| 183 | +.form-write-fnc { | |
| 184 | + display: flex; | |
| 185 | + justify-content: center; | |
| 186 | + gap:$spacing-sm; | |
| 187 | + margin-top: $spacing-lg; | |
| 188 | +} | |
| 189 | +.form-view-result, | |
| 190 | +.form-view { | |
| 191 | + .q-tit { | |
| 192 | + justify-content: space-between; | |
| 193 | + gap:$spacing-md; | |
| 194 | + // border-bottom: $stroke-secondary; | |
| 195 | + // padding-bottom: $spacing-md; | |
| 196 | + align-items: center; | |
| 197 | + display: flex; | |
| 198 | + align-items: center; | |
| 199 | + line-height: normal; | |
| 200 | + } | |
| 201 | + .a-summary-area { | |
| 202 | + display: none; | |
| 203 | + background-color: $color-background-brand-primary; | |
| 204 | + padding:$spacing-md; | |
| 205 | + border-radius: $radius-sm; | |
| 206 | + &.is-active { | |
| 207 | + display: block; | |
| 208 | + } | |
| 209 | + } | |
| 210 | + .l-area { | |
| 211 | + flex:1; | |
| 212 | + display: flex; | |
| 213 | + gap:$spacing-xsm; | |
| 214 | + align-items: center; | |
| 215 | + } | |
| 216 | + .r-area { | |
| 217 | + flex:none; | |
| 218 | + margin-left:auto; | |
| 219 | + } | |
| 220 | + .q-txt { | |
| 221 | + @include typo('tit-sm'); | |
| 222 | + } | |
| 223 | + .a-result-list { | |
| 224 | + gap:0; | |
| 225 | + border:$stroke-secondary; | |
| 226 | + border-radius: $radius-sm; | |
| 227 | + overflow: hidden; | |
| 228 | + background: $color-background-default-primary; | |
| 229 | + > li { | |
| 230 | + padding:$spacing-xsm $spacing-md; | |
| 231 | + &:nth-child(2n) { | |
| 232 | + background: $color-background-default-secondary; | |
| 233 | + } | |
| 234 | + } | |
| 235 | + } | |
| 236 | + .a-list{ | |
| 237 | + display: grid; | |
| 238 | + gap:$spacing-md; | |
| 239 | + .a-item { | |
| 240 | + display: flex; | |
| 241 | + gap:$spacing-xsm; | |
| 242 | + } | |
| 243 | + .a-info { | |
| 244 | + flex:none; | |
| 245 | + } | |
| 246 | + } | |
| 247 | + .a-area { | |
| 248 | + .a-fnc { | |
| 249 | + @extend %flexArea; | |
| 250 | + } | |
| 251 | + } | |
| 252 | +} | |
| 253 | + | |
| 254 | +// 새창 | |
| 255 | +body:has(.form-area) { | |
| 256 | + background: $color-background-brand-primary; | |
| 257 | + padding:$spacing-2xlg 0; | |
| 258 | +} | |
| 259 | +.form-view { | |
| 260 | + .form-section-header { | |
| 261 | + @extend %flexArea; | |
| 262 | + border-radius: $radius-md; | |
| 263 | + border: $size-stroke-xsm solid $color-stroke-default-quaternary; | |
| 264 | + background: $color-background-default-primary; | |
| 265 | + padding:$spacing-lg; | |
| 266 | + } | |
| 267 | + .form-section-header, | |
| 268 | + .form-item { | |
| 269 | + box-shadow: $shadow-sm; | |
| 270 | + border: $size-stroke-xsm solid $color-stroke-default-quaternary; | |
| 271 | + } | |
| 272 | + .form-item-list { | |
| 273 | + gap: $spacing-sm; | |
| 274 | + } | |
| 275 | +} | |
| 276 | + | |
| 277 | +.form-agree-area { | |
| 278 | + border-radius: $radius-md; | |
| 279 | + background: $color-background-default-tertiary; | |
| 280 | + padding: $spacing-sm; | |
| 281 | + display: flex; | |
| 282 | + flex-direction: column; | |
| 283 | + gap: $spacing-xsm; | |
| 284 | + .txt-area { | |
| 285 | + border-radius: $radius-md; | |
| 286 | + background: $color-background-default-secondary; | |
| 287 | + padding: $spacing-lg; | |
| 288 | + color: $color-font-default-secondary; | |
| 289 | + max-height: 20rem; | |
| 290 | + overflow-y: auto; | |
| 291 | + } | |
| 292 | +} | |
| 293 | + | |
| 294 | +@include responsive(mobile) { | |
| 295 | + //반응형 true | |
| 296 | + [data-responsive="true"] { | |
| 297 | + .form-write, | |
| 298 | + .form-view-result, | |
| 299 | + .form-view { | |
| 300 | + .form-section { | |
| 301 | + gap:$spacing-md; | |
| 302 | + } | |
| 303 | + .form-item-list { | |
| 304 | + gap:$spacing-sm; | |
| 305 | + } | |
| 306 | + .form-item { | |
| 307 | + padding:$spacing-md; | |
| 308 | + } | |
| 309 | + } | |
| 310 | + .form-write { | |
| 311 | + .form-item { | |
| 312 | + .q-tit { | |
| 313 | + select { | |
| 314 | + width: 100%; | |
| 315 | + } | |
| 316 | + } | |
| 317 | + } | |
| 318 | + } | |
| 319 | + .form-view .form-section-header { | |
| 320 | + padding:$spacing-md; | |
| 321 | + } | |
| 322 | + .form-view-result .q-tit { | |
| 323 | + flex-direction: column-reverse; | |
| 324 | + } | |
| 325 | + } | |
| 326 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/module/_login.scss
... | ... | @@ -0,0 +1,85 @@ |
| 1 | +// 로그인 | |
| 2 | +.login-area { | |
| 3 | + display: flex; | |
| 4 | + flex-direction: column; | |
| 5 | + align-items: center; | |
| 6 | + justify-content: center; | |
| 7 | + gap: $spacing-lg; | |
| 8 | + min-height: 100%; | |
| 9 | + padding:$spacing-lg 0; | |
| 10 | + background: linear-gradient(180deg, $color-background-brand-primary 0%, $color-background-site 60%); | |
| 11 | + .wrap-2xsm { | |
| 12 | + display: flex; | |
| 13 | + flex-direction: column; | |
| 14 | + align-items: center; | |
| 15 | + gap: $spacing-lg; | |
| 16 | + } | |
| 17 | + .login-header { | |
| 18 | + .logo { | |
| 19 | + position: relative; | |
| 20 | + display: flex; | |
| 21 | + align-items: center; | |
| 22 | + font-size:0; | |
| 23 | + gap:$spacing-2xsm; | |
| 24 | + flex:none; | |
| 25 | + a:not(.txt) { | |
| 26 | + width: 8rem; | |
| 27 | + display: block; | |
| 28 | + height: 4.8rem; | |
| 29 | + background: url($url-img + 'common/logo/logo_txt.svg') center /contain no-repeat ; | |
| 30 | + } | |
| 31 | + .txt { | |
| 32 | + font-size:2.4rem; | |
| 33 | + letter-spacing: -0.06em; | |
| 34 | + // background: linear-gradient(90deg, $color-indigo60 0%, $color-primary40 100%); | |
| 35 | + // background-clip: text; | |
| 36 | + // -webkit-background-clip: text; | |
| 37 | + // color: transparent; | |
| 38 | + } | |
| 39 | + } | |
| 40 | + } | |
| 41 | + .login-body { | |
| 42 | + display: flex; | |
| 43 | + padding: $spacing-xlg $spacing-lg; | |
| 44 | + flex-direction: column; | |
| 45 | + align-items: flex-start; | |
| 46 | + gap: $spacing-lg; | |
| 47 | + border-radius: $radius-lg; | |
| 48 | + border: $size-stroke-xsm solid $color-stroke-default-quaternary; | |
| 49 | + background: $color-background-default-primary; | |
| 50 | + box-shadow: $shadow-sm; | |
| 51 | + width: 100%; | |
| 52 | + .login-tit { | |
| 53 | + h2 { | |
| 54 | + @include typo('tit-lg'); | |
| 55 | + } | |
| 56 | + } | |
| 57 | + .login { | |
| 58 | + display: flex; | |
| 59 | + flex-direction: column; | |
| 60 | + align-items: flex-start; | |
| 61 | + gap: $spacing-md; | |
| 62 | + align-self: stretch; | |
| 63 | + .form-list { | |
| 64 | + display: flex; | |
| 65 | + flex-direction: column; | |
| 66 | + gap: $spacing-xsm; | |
| 67 | + width: 100%; | |
| 68 | + input[type=text], | |
| 69 | + input[type=password] { | |
| 70 | + width: 100%; | |
| 71 | + min-width:0; | |
| 72 | + } | |
| 73 | + } | |
| 74 | + .btn-group { | |
| 75 | + width: 100%; | |
| 76 | + } | |
| 77 | + } | |
| 78 | + } | |
| 79 | + .login-footer { | |
| 80 | + .copy { | |
| 81 | + @include typo('label-xsm'); | |
| 82 | + color: $color-font-default-tertiary; | |
| 83 | + } | |
| 84 | + } | |
| 85 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/module/_message.scss
... | ... | @@ -0,0 +1,304 @@ |
| 1 | +.msg-area{ | |
| 2 | + display: grid; | |
| 3 | + grid-template-columns: 28rem 1fr; | |
| 4 | + gap: $spacing-md; | |
| 5 | + min-height: 56rem; | |
| 6 | + height: 80rem; | |
| 7 | + overflow: hidden; | |
| 8 | + .msg-nav, | |
| 9 | + .msg-cont { | |
| 10 | + display: flex; | |
| 11 | + flex-direction: column; | |
| 12 | + justify-content: space-between; | |
| 13 | + height: 100%; | |
| 14 | + border-radius: $radius-md; | |
| 15 | + overflow: hidden; | |
| 16 | + } | |
| 17 | +} | |
| 18 | +.msg-nav { | |
| 19 | + border: $stroke-secondary; | |
| 20 | + padding: $spacing-md $spacing-sm; | |
| 21 | + overflow: hidden; | |
| 22 | + gap:$spacing-sm; | |
| 23 | + .msg-nav-footer, | |
| 24 | + .msg-nav-header { | |
| 25 | + flex:none; | |
| 26 | + } | |
| 27 | + .search { | |
| 28 | + input { | |
| 29 | + width: 100%; | |
| 30 | + } | |
| 31 | + } | |
| 32 | + .msg-nav-body { | |
| 33 | + flex:1; | |
| 34 | + overflow-y: auto; | |
| 35 | + > li { | |
| 36 | + display: flex; | |
| 37 | + align-items: center; | |
| 38 | + border-radius: $radius-sm; | |
| 39 | + position: relative; | |
| 40 | + padding: $spacing-md; | |
| 41 | + @extend %flexArea; | |
| 42 | + &:hover { | |
| 43 | + background-color: $color-background-default-secondary; | |
| 44 | + } | |
| 45 | + &.is-active { | |
| 46 | + background-color: $color-background-brand-primary; | |
| 47 | + } | |
| 48 | + } | |
| 49 | + .num { | |
| 50 | + display: flex; | |
| 51 | + align-items: center; | |
| 52 | + justify-content: center; | |
| 53 | + width: 2.4rem; | |
| 54 | + aspect-ratio: 1; | |
| 55 | + border-radius: $radius-full; | |
| 56 | + background: $color-background-brand-accent-inverse; | |
| 57 | + color:$color-font-default-primary-inverse; | |
| 58 | + font-size: $size-font-2xsm; | |
| 59 | + } | |
| 60 | + } | |
| 61 | + | |
| 62 | + .msg-nav-footer { | |
| 63 | + width: calc(100% + calc($spacing-sm * 2)); | |
| 64 | + margin-left: -$spacing-sm; | |
| 65 | + margin-bottom: -$spacing-md; | |
| 66 | + display: flex; | |
| 67 | + border-top:$stroke-primary; | |
| 68 | + .btn.primary { | |
| 69 | + flex:1; | |
| 70 | + | |
| 71 | + } | |
| 72 | + .btn { | |
| 73 | + border:none; | |
| 74 | + border-radius: 0; | |
| 75 | + } | |
| 76 | + } | |
| 77 | +} | |
| 78 | + | |
| 79 | +.msg-cont{ | |
| 80 | + position: relative; | |
| 81 | + background-color: $color-background-default-secondary; | |
| 82 | + .msg-cont-header { | |
| 83 | + padding:$spacing-sm $spacing-lg; | |
| 84 | + border-bottom: $stroke-secondary; | |
| 85 | + .msg-tit { | |
| 86 | + @include typo('tit-xsm'); | |
| 87 | + color: $color-font-default-tertiary; | |
| 88 | + } | |
| 89 | + p { | |
| 90 | + @include typo('body-sm'); | |
| 91 | + color: $color-font-default-secondary; | |
| 92 | + } | |
| 93 | + .fnc { | |
| 94 | + display: flex; | |
| 95 | + flex-wrap: wrap; | |
| 96 | + align-items: center; | |
| 97 | + gap:$spacing-xsm; | |
| 98 | + } | |
| 99 | + } | |
| 100 | + .msg-txt { | |
| 101 | + @include typo('PrM'); | |
| 102 | + width: auto; | |
| 103 | + max-width: 40rem; | |
| 104 | + padding: $spacing-md; | |
| 105 | + background-color: $color-background-default-primary; | |
| 106 | + border: $stroke-secondary; | |
| 107 | + border-radius: $radius-sm; | |
| 108 | + margin-bottom: $spacing-2xsm; | |
| 109 | + text-align: left; | |
| 110 | + position: relative; | |
| 111 | + white-space: wrap; | |
| 112 | + | |
| 113 | + } | |
| 114 | +} | |
| 115 | +.msg-cont-body { | |
| 116 | + flex:1; | |
| 117 | + padding: $spacing-md; | |
| 118 | + overflow-y: auto; | |
| 119 | + display:flex; | |
| 120 | + flex-direction: column; | |
| 121 | + gap:$spacing-lg; | |
| 122 | + padding:$spacing-lg; | |
| 123 | + .item { | |
| 124 | + display: flex; | |
| 125 | + flex-direction: column; | |
| 126 | + gap:$spacing-2xsm; | |
| 127 | + .time { | |
| 128 | + @include typo('body-xsm'); | |
| 129 | + color: $color-font-default-tertiary; | |
| 130 | + } | |
| 131 | + .txt { | |
| 132 | + border-radius:$radius-sm; | |
| 133 | + border: $size-stroke-xsm solid $color-stroke-default-tertiary; | |
| 134 | + background:$color-background-default-primary; | |
| 135 | + max-width: 48rem; | |
| 136 | + width: fit-content; | |
| 137 | + word-break: break-all; | |
| 138 | + padding:$spacing-sm $spacing-md; | |
| 139 | + } | |
| 140 | + &.my { | |
| 141 | + align-items: flex-end; | |
| 142 | + | |
| 143 | + .txt { | |
| 144 | + border:none; | |
| 145 | + background-color: $color-primary10; | |
| 146 | + } | |
| 147 | + } | |
| 148 | + } | |
| 149 | + | |
| 150 | +} | |
| 151 | +.msg-cont-footer { | |
| 152 | + padding: $spacing-lg; | |
| 153 | + display: flex; | |
| 154 | + flex-direction: column; | |
| 155 | + gap: $spacing-md; | |
| 156 | + align-items: flex-start; | |
| 157 | + .write { | |
| 158 | + display: flex; | |
| 159 | + flex-direction: column; | |
| 160 | + gap:$spacing-xsm; | |
| 161 | + background-color: $color-background-default-primary; | |
| 162 | + width: 100%; | |
| 163 | + border:$stroke-primary; | |
| 164 | + border-radius: $radius-sm; | |
| 165 | + padding:$spacing-md; | |
| 166 | + input[type=text], | |
| 167 | + textarea { | |
| 168 | + border:none; | |
| 169 | + background-color: $color-transparent; | |
| 170 | + padding:0; | |
| 171 | + &:focus { | |
| 172 | + border:none; | |
| 173 | + box-shadow: none; | |
| 174 | + } | |
| 175 | + } | |
| 176 | + textarea { | |
| 177 | + min-height: 4rem; | |
| 178 | + } | |
| 179 | + &:has(input[type=text]) { | |
| 180 | + padding-top:0; | |
| 181 | + padding-bottom:0; | |
| 182 | + flex-direction: row; | |
| 183 | + input[type=text] { | |
| 184 | + flex:1; | |
| 185 | + } | |
| 186 | + } | |
| 187 | + } | |
| 188 | + .img-add-area { | |
| 189 | + position: relative; | |
| 190 | + border:$stroke-secondary; | |
| 191 | + border-radius: $radius-sm; | |
| 192 | + overflow: hidden; | |
| 193 | + width: 16rem; | |
| 194 | + aspect-ratio: 1; | |
| 195 | + object-fit: cover; | |
| 196 | + img { | |
| 197 | + display: block; | |
| 198 | + width: 100%; | |
| 199 | + height: 100%; | |
| 200 | + } | |
| 201 | + .btn { | |
| 202 | + position: absolute; | |
| 203 | + right:$spacing-2xsm; | |
| 204 | + top:$spacing-2xsm; | |
| 205 | + } | |
| 206 | + } | |
| 207 | + .write-fnc-area { | |
| 208 | + @extend %flexArea; | |
| 209 | + } | |
| 210 | +} | |
| 211 | + | |
| 212 | +// pupup-msg | |
| 213 | +.pupup-msg { | |
| 214 | + .pop-header { | |
| 215 | + margin: -4rem -4rem 0; | |
| 216 | + padding: 4rem 4rem 0; | |
| 217 | + background: $color-background-brand-primary; | |
| 218 | + } | |
| 219 | + .msg-cont-body { | |
| 220 | + background: $color-background-brand-primary; | |
| 221 | + padding-top:$spacing-lg; | |
| 222 | + padding-bottom:$spacing-lg; | |
| 223 | + } | |
| 224 | + .msg-cont-footer { | |
| 225 | + padding:$spacing-xsm 0 0; | |
| 226 | + margin-bottom: $spacing-sm * -1; | |
| 227 | + } | |
| 228 | +} | |
| 229 | + | |
| 230 | +.pupup-chatbot { | |
| 231 | + display: none; | |
| 232 | + position: absolute; | |
| 233 | + flex-direction: column; | |
| 234 | + background-color: $color-background-default-primary; | |
| 235 | + padding:0; | |
| 236 | + box-shadow: $shadow-md; | |
| 237 | + border-radius: $radius-md; | |
| 238 | + overflow: hidden; | |
| 239 | + width: 36rem; | |
| 240 | + height: 64rem; | |
| 241 | + max-height: calc(100vh - 8rem); | |
| 242 | + border: $size-stroke-sm solid $color-stroke-default-primary; | |
| 243 | + .pop-header { | |
| 244 | + padding:$spacing-md $spacing-lg; | |
| 245 | + background: $color-background-default-primary-inverse; | |
| 246 | + h1 { | |
| 247 | + @include typo('tit-md'); | |
| 248 | + color: $color-font-default-primary-inverse; | |
| 249 | + } | |
| 250 | + } | |
| 251 | + .msg-cont-body { | |
| 252 | + background: $color-background-default-secondary; | |
| 253 | + padding:$spacing-lg; | |
| 254 | + flex-grow: 1; | |
| 255 | + overflow-y: auto; | |
| 256 | + } | |
| 257 | + .pop-footer { | |
| 258 | + padding:$spacing-sm $spacing-lg; | |
| 259 | + box-shadow: $shadow-md; | |
| 260 | + } | |
| 261 | + .pop-close { | |
| 262 | + top: $spacing-xsm; | |
| 263 | + right:$spacing-xsm; | |
| 264 | + &::before { | |
| 265 | + background:$color-icon-default-primary-inverse; | |
| 266 | + } | |
| 267 | + } | |
| 268 | +} | |
| 269 | + | |
| 270 | +.site-float-area { | |
| 271 | + .float-chatbot.is-active { | |
| 272 | + .pupup-chatbot { | |
| 273 | + display: flex; | |
| 274 | + animation: opacityUp .3s forwards; | |
| 275 | + } | |
| 276 | + } | |
| 277 | + .pupup-chatbot { | |
| 278 | + left:-$spacing-md; | |
| 279 | + bottom:0; | |
| 280 | + transform: translateX(-100%); | |
| 281 | + } | |
| 282 | +} | |
| 283 | + | |
| 284 | +@include responsive(mobile) { | |
| 285 | + [data-responsive="true"]:root { | |
| 286 | + .msg-area { | |
| 287 | + grid-template-columns: initial; | |
| 288 | + height: initial; | |
| 289 | + .msg-nav, | |
| 290 | + .msg-cont { | |
| 291 | + height:48rem; | |
| 292 | + } | |
| 293 | + } | |
| 294 | + .site-float-area .pupup-chatbot { | |
| 295 | + position:fixed; | |
| 296 | + inset: 0; | |
| 297 | + max-height: 100%; | |
| 298 | + height: 100%; | |
| 299 | + width: 100%; | |
| 300 | + border-radius: 0; | |
| 301 | + transform: initial; | |
| 302 | + } | |
| 303 | + } | |
| 304 | +} |
+++ resources/front/site/SITE_00000/css/common/module/_orgArea.scss
... | ... | @@ -0,0 +1,245 @@ |
| 1 | +// fieldset.search-area, | |
| 2 | +// div.search { | |
| 3 | +// width: 100%; | |
| 4 | +// } | |
| 5 | +// fieldset.search-area { | |
| 6 | +// margin-bottom: $spacing-md; | |
| 7 | +// } | |
| 8 | + | |
| 9 | +.org-area { | |
| 10 | + display: grid; | |
| 11 | + grid-template-columns: 24rem 1fr; | |
| 12 | + border:$stroke-secondary; | |
| 13 | + border-radius: $radius-md; | |
| 14 | + height: 100%; | |
| 15 | + overflow: hidden; | |
| 16 | + label { | |
| 17 | + cursor: pointer; | |
| 18 | + } | |
| 19 | +} | |
| 20 | + | |
| 21 | +.org-nav { | |
| 22 | + height: 100%; | |
| 23 | + border-right: $stroke-secondary; | |
| 24 | + background: $color-background-default-tertiary; | |
| 25 | + overflow: auto; | |
| 26 | + .org-nav-body { | |
| 27 | + height: 100%; | |
| 28 | + // padding: $spacing-xsm 0; | |
| 29 | + li { | |
| 30 | + > label { | |
| 31 | + all:unset; | |
| 32 | + display: flex; | |
| 33 | + padding:$spacing-sm $spacing-md; | |
| 34 | + gap:$spacing-sm; | |
| 35 | + font-weight: $size-font-weight-md; | |
| 36 | + background-color: $color-background-default-primary; | |
| 37 | + cursor: pointer; | |
| 38 | + &::before, | |
| 39 | + &::after { | |
| 40 | + all:unset; | |
| 41 | + } | |
| 42 | + } | |
| 43 | + > input[type=checkbox], | |
| 44 | + > input[type=radio] { | |
| 45 | + & ~ul { | |
| 46 | + display: none; | |
| 47 | + padding:0 $spacing-sm; | |
| 48 | + } | |
| 49 | + &:checked { | |
| 50 | + & ~ label { | |
| 51 | + color:$color-font-brand-primary; | |
| 52 | + font-weight: $size-font-weight-xlg; | |
| 53 | + &::before { | |
| 54 | + mask-image: url(pathIcon(map-get($icons,"ico-plus"))); | |
| 55 | + background-color: $color-icon-brand-primary; | |
| 56 | + } | |
| 57 | + } | |
| 58 | + & ~ ul { | |
| 59 | + display: flex; | |
| 60 | + flex-direction: column; | |
| 61 | + } | |
| 62 | + } | |
| 63 | + } | |
| 64 | + } | |
| 65 | + li:has(>ul) { | |
| 66 | + > label { | |
| 67 | + all:unset; | |
| 68 | + display: flex; | |
| 69 | + padding:$spacing-sm; | |
| 70 | + gap:$spacing-2xsm; | |
| 71 | + font-weight: $size-font-weight-md; | |
| 72 | + background-color: $color-background-default-primary; | |
| 73 | + cursor: pointer; | |
| 74 | + &::before, | |
| 75 | + &::after { | |
| 76 | + all:unset; | |
| 77 | + } | |
| 78 | + &::before { | |
| 79 | + content: " "; | |
| 80 | + display: block; | |
| 81 | + mask-image: url(pathIcon(map-get($icons,"ico-caret-down"))); | |
| 82 | + @include ico-set($color-icon-default-secondary, $size-icon-md); | |
| 83 | + } | |
| 84 | + } | |
| 85 | + > input[type=checkbox], | |
| 86 | + > input[type=radio] { | |
| 87 | + & ~ul { | |
| 88 | + display: none; | |
| 89 | + padding:0 $spacing-xsm $spacing-xsm $spacing-xsm; | |
| 90 | + } | |
| 91 | + &:checked { | |
| 92 | + & ~ label { | |
| 93 | + color:$color-font-brand-primary; | |
| 94 | + font-weight: $size-font-weight-xlg; | |
| 95 | + &::before { | |
| 96 | + mask-image: url(pathIcon(map-get($icons,"ico-caret-up"))); | |
| 97 | + background-color: $color-icon-brand-primary; | |
| 98 | + } | |
| 99 | + } | |
| 100 | + & ~ ul { | |
| 101 | + display: flex; | |
| 102 | + flex-direction: column; | |
| 103 | + } | |
| 104 | + } | |
| 105 | + } | |
| 106 | + ul { | |
| 107 | + ul { | |
| 108 | + display: flex; | |
| 109 | + flex-direction: column; | |
| 110 | + padding: $spacing-2xsm; | |
| 111 | + background-color: $color-background-default-secondary; | |
| 112 | + border-radius: $radius-sm; | |
| 113 | + padding: $spacing-xsm !important; | |
| 114 | + label { | |
| 115 | + display: block; | |
| 116 | + padding:$spacing-xsm; | |
| 117 | + border-radius:$radius-sm; | |
| 118 | + background-color: transparent; | |
| 119 | + @include typo('label-sm'); | |
| 120 | + &::before, | |
| 121 | + &::after { | |
| 122 | + all:unset; | |
| 123 | + display: block; | |
| 124 | + } | |
| 125 | + } | |
| 126 | + input[type=checkbox], | |
| 127 | + input[type=radio] { | |
| 128 | + &:checked { | |
| 129 | + & ~ label { | |
| 130 | + background-color: $color-background-default-primary; | |
| 131 | + border: $stroke-secondary; | |
| 132 | + } | |
| 133 | + } | |
| 134 | + } | |
| 135 | + } | |
| 136 | + } | |
| 137 | + &:has(input[type=checkbox]:checked), | |
| 138 | + &:has(input[type=radio]:checked) { | |
| 139 | + background-color: $color-background-default-primary; | |
| 140 | + } | |
| 141 | + } | |
| 142 | + | |
| 143 | + .cls-area > li { | |
| 144 | + margin-left: 2.8rem; | |
| 145 | + | |
| 146 | + input[type=radio] { | |
| 147 | + &+label { | |
| 148 | + &::before, | |
| 149 | + &::after { | |
| 150 | + display: none; | |
| 151 | + } | |
| 152 | + } | |
| 153 | + | |
| 154 | + &:checked, | |
| 155 | + &:hover, | |
| 156 | + &.is-active { | |
| 157 | + &+label > span { | |
| 158 | + border: none; | |
| 159 | + background-color: $color-background-brand-primary; | |
| 160 | + } | |
| 161 | + } | |
| 162 | + } | |
| 163 | + } | |
| 164 | + } | |
| 165 | +} | |
| 166 | + | |
| 167 | +.org-cont { | |
| 168 | + display: flex; | |
| 169 | + flex-direction: column; | |
| 170 | + overflow: hidden; | |
| 171 | + .org-cont-header, | |
| 172 | + .org-cont-footer { | |
| 173 | + flex:none; | |
| 174 | + } | |
| 175 | + .org-cont-header { | |
| 176 | + @extend %flexArea; | |
| 177 | + border-bottom: $stroke-secondary; | |
| 178 | + background: $color-background-default-primary; | |
| 179 | + padding: $spacing-sm $spacing-md; | |
| 180 | + } | |
| 181 | + .org-cont-body { | |
| 182 | + height: 100%; | |
| 183 | + flex:1; | |
| 184 | + overflow-y: auto; | |
| 185 | + display: flex; | |
| 186 | + flex-direction: column; | |
| 187 | + li { | |
| 188 | + position:relative; | |
| 189 | + display: flex; | |
| 190 | + align-items: center; | |
| 191 | + padding: $spacing-sm $spacing-md; | |
| 192 | + padding-left: 4.4rem; | |
| 193 | + border-bottom: $stroke-secondary; | |
| 194 | + label { | |
| 195 | + position: absolute; | |
| 196 | + padding: $spacing-sm $spacing-md; | |
| 197 | + inset: 0; | |
| 198 | + font-size:0; | |
| 199 | + &::after { | |
| 200 | + left:$spacing-md; | |
| 201 | + } | |
| 202 | + } | |
| 203 | + &:has(input:checked) { | |
| 204 | + background: $color-background-brand-primary; | |
| 205 | + } | |
| 206 | + } | |
| 207 | + .profile { | |
| 208 | + flex:1; | |
| 209 | + .txt-area { | |
| 210 | + display: flex; | |
| 211 | + flex-direction: row; | |
| 212 | + align-items: center; | |
| 213 | + gap:$spacing-sm; | |
| 214 | + flex-wrap: wrap; | |
| 215 | + } | |
| 216 | + } | |
| 217 | + .fnc { | |
| 218 | + flex:none; | |
| 219 | + display: flex; | |
| 220 | + flex-wrap: wrap; | |
| 221 | + } | |
| 222 | + } | |
| 223 | +} | |
| 224 | + | |
| 225 | +@include responsive(mobile) { | |
| 226 | + [data-responsive="true"]:root { | |
| 227 | + .org-nav { | |
| 228 | + min-height: 40%; | |
| 229 | + } | |
| 230 | + .org-area { | |
| 231 | + grid-template-columns: initial; | |
| 232 | + } | |
| 233 | + .org-cont { | |
| 234 | + border-top: $stroke-secondary; | |
| 235 | + .org-cont-header { | |
| 236 | + flex-direction: column; | |
| 237 | + flex-wrap: wrap; | |
| 238 | + flex-direction: column-reverse; | |
| 239 | + .search-area { | |
| 240 | + width: 100%; | |
| 241 | + } | |
| 242 | + } | |
| 243 | + } | |
| 244 | + } | |
| 245 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/module/_point.scss
... | ... | @@ -0,0 +1,131 @@ |
| 1 | +.user-point-area { | |
| 2 | + display: flex; | |
| 3 | + gap: $spacing-sm; | |
| 4 | + .user-area { | |
| 5 | + width: 24rem; | |
| 6 | + height: fit-content; | |
| 7 | + border-radius: $radius-md; | |
| 8 | + border: $stroke-secondary; | |
| 9 | + padding: $spacing-md; | |
| 10 | + display: flex; | |
| 11 | + flex-direction: column; | |
| 12 | + align-items: center; | |
| 13 | + gap: $spacing-md; | |
| 14 | + .profile { | |
| 15 | + | |
| 16 | + .img-area { | |
| 17 | + position: relative; | |
| 18 | + } | |
| 19 | + } | |
| 20 | + .profile-badge { | |
| 21 | + width: 3.6rem; | |
| 22 | + aspect-ratio: 1; | |
| 23 | + position: absolute; | |
| 24 | + right: -1.2rem; | |
| 25 | + bottom: -1.2rem; | |
| 26 | + img { | |
| 27 | + object-fit: contain; | |
| 28 | + } | |
| 29 | + } | |
| 30 | + .info-area { | |
| 31 | + display: flex; | |
| 32 | + flex-direction: column; | |
| 33 | + gap: $spacing-md; | |
| 34 | + border-top: $stroke-secondary; | |
| 35 | + padding-top: $spacing-md; | |
| 36 | + width: 100%; | |
| 37 | + .txt-area { | |
| 38 | + width: 100%; | |
| 39 | + strong { | |
| 40 | + @include typo('tit-md'); | |
| 41 | + display: block; | |
| 42 | + text-align: center; | |
| 43 | + } | |
| 44 | + p { | |
| 45 | + text-align: center; | |
| 46 | + } | |
| 47 | + } | |
| 48 | + .point-area { | |
| 49 | + padding: $spacing-sm; | |
| 50 | + background-color: $color-background-default-secondary; | |
| 51 | + border-radius: $radius-sm; | |
| 52 | + border: $size-stroke-md solid $color-stroke-default-quaternary; | |
| 53 | + display: flex; | |
| 54 | + flex-direction: column; | |
| 55 | + width: 100%; | |
| 56 | + span { | |
| 57 | + color: $color-font-default-tertiary; | |
| 58 | + } | |
| 59 | + em { | |
| 60 | + font-size: 20px; | |
| 61 | + } | |
| 62 | + } | |
| 63 | + } | |
| 64 | + } | |
| 65 | + .cont { | |
| 66 | + flex: 1; | |
| 67 | + } | |
| 68 | + .deco-list { | |
| 69 | + display: grid; | |
| 70 | + grid-template-columns: repeat(4, 1fr); | |
| 71 | + gap: $spacing-xsm; | |
| 72 | + > li { | |
| 73 | + position: relative; | |
| 74 | + padding: $spacing-sm $spacing-xsm; | |
| 75 | + label { | |
| 76 | + inset: 0; | |
| 77 | + position: absolute; | |
| 78 | + font-size: 0; | |
| 79 | + border-radius: $radius-sm; | |
| 80 | + border:$stroke-secondary; | |
| 81 | + margin: 0; | |
| 82 | + cursor: pointer; | |
| 83 | + &::before, | |
| 84 | + &::after { | |
| 85 | + display: none; | |
| 86 | + } | |
| 87 | + } | |
| 88 | + .img-area { | |
| 89 | + display: flex; | |
| 90 | + justify-content: center; | |
| 91 | + } | |
| 92 | + .txt-area { | |
| 93 | + display: flex; | |
| 94 | + flex-direction: column; | |
| 95 | + align-items: center; | |
| 96 | + margin-top: $spacing-xsm; | |
| 97 | + & > * { | |
| 98 | + text-align: center; | |
| 99 | + } | |
| 100 | + strong { | |
| 101 | + color: $color-font-brand-primary; | |
| 102 | + } | |
| 103 | + } | |
| 104 | + input:checked ~ label { | |
| 105 | + border-color: $color-stroke-brand-primary; | |
| 106 | + border-width: $size-stroke-sm; | |
| 107 | + } | |
| 108 | + &.is-done { | |
| 109 | + .txt-area { | |
| 110 | + strong { | |
| 111 | + color: $color-font-default-secondary; | |
| 112 | + } | |
| 113 | + } | |
| 114 | + } | |
| 115 | + } | |
| 116 | + } | |
| 117 | +} | |
| 118 | + | |
| 119 | +@include responsive(mobile) { | |
| 120 | + [data-responsive="true"]:root { | |
| 121 | + .user-point-area { | |
| 122 | + flex-direction: column; | |
| 123 | + .user-area { | |
| 124 | + width: initial; | |
| 125 | + } | |
| 126 | + .deco-list { | |
| 127 | + grid-template-columns: repeat(2, 1fr); | |
| 128 | + } | |
| 129 | + } | |
| 130 | + } | |
| 131 | +} |
+++ resources/front/site/SITE_00000/css/common/module/_reply.scss
... | ... | @@ -0,0 +1,253 @@ |
| 1 | +.reply-area { | |
| 2 | + border-top:$stroke-secondary; | |
| 3 | + padding-top:$spacing-lg; | |
| 4 | + // display: none; | |
| 5 | + // &.is-active { | |
| 6 | + // display: block; | |
| 7 | + // } | |
| 8 | + .wrap-sm { | |
| 9 | + display: flex; | |
| 10 | + flex-direction: column; | |
| 11 | + gap:$spacing-md; | |
| 12 | + @at-root .popup-modal .reply-area .wrap-sm { | |
| 13 | + padding:0; | |
| 14 | + } | |
| 15 | + } | |
| 16 | + | |
| 17 | + .reply-list{ | |
| 18 | + display: flex; | |
| 19 | + flex-direction: column; | |
| 20 | + gap:$spacing-md; | |
| 21 | + li { | |
| 22 | + display: flex; | |
| 23 | + gap: $spacing-md; | |
| 24 | + align-items: flex-start; | |
| 25 | + } | |
| 26 | + > li { | |
| 27 | + > .txt-area { | |
| 28 | + flex:1; | |
| 29 | + display: flex; | |
| 30 | + flex-direction: column; | |
| 31 | + border-radius: $radius-none $radius-md $radius-md $radius-md; | |
| 32 | + background: $color-background-default-secondary; | |
| 33 | + padding:$spacing-lg $spacing-md; | |
| 34 | + gap:$spacing-sm; | |
| 35 | + span { | |
| 36 | + color: $color-font-default-tertiary; | |
| 37 | + font-size: $size-font-xsm; | |
| 38 | + } | |
| 39 | + } | |
| 40 | + } | |
| 41 | + } | |
| 42 | + .profile-img-area { | |
| 43 | + flex:none; | |
| 44 | + figure { | |
| 45 | + width: 4rem; | |
| 46 | + height: 4rem; | |
| 47 | + object-fit: cover; | |
| 48 | + border-radius: $radius-full; | |
| 49 | + border: $stroke-secondary; | |
| 50 | + overflow: hidden; | |
| 51 | + img { | |
| 52 | + width: 100%; | |
| 53 | + height: 100%; | |
| 54 | + } | |
| 55 | + } | |
| 56 | + } | |
| 57 | + .reply-tit-area { | |
| 58 | + display: flex; | |
| 59 | + justify-content: space-between; | |
| 60 | + .l-area, | |
| 61 | + .r-area { | |
| 62 | + display: flex; | |
| 63 | + align-items: center; | |
| 64 | + gap:0 $spacing-xsm; | |
| 65 | + } | |
| 66 | + .l-area { | |
| 67 | + flex-direction: column; | |
| 68 | + align-items: flex-start; | |
| 69 | + } | |
| 70 | + } | |
| 71 | + .reply-txt-area { | |
| 72 | + display: flex; | |
| 73 | + flex-direction: column; | |
| 74 | + gap:$spacing-md; | |
| 75 | + .img { | |
| 76 | + border:$stroke-secondary; | |
| 77 | + border-radius: $radius-sm; | |
| 78 | + overflow: hidden; | |
| 79 | + max-width: 40rem; | |
| 80 | + img { | |
| 81 | + display: block; | |
| 82 | + max-width: 100%; | |
| 83 | + } | |
| 84 | + } | |
| 85 | + } | |
| 86 | + .reply-fnc-area { | |
| 87 | + .l-area { | |
| 88 | + display: flex; | |
| 89 | + gap: $spacing-sm; | |
| 90 | + } | |
| 91 | + } | |
| 92 | + .reply-re-area { | |
| 93 | + flex-direction: column; | |
| 94 | + gap:$spacing-md; | |
| 95 | + padding:0 $spacing-md; | |
| 96 | + // display: none; | |
| 97 | + // &.is-active { | |
| 98 | + // display: flex; | |
| 99 | + // } | |
| 100 | + .reply-re-list { | |
| 101 | + display: flex; | |
| 102 | + flex-direction: column; | |
| 103 | + gap:$spacing-md; | |
| 104 | + > li { | |
| 105 | + position: relative; | |
| 106 | + &::before { | |
| 107 | + content: ""; | |
| 108 | + position: absolute; | |
| 109 | + top: 3.2rem; | |
| 110 | + left:1.2rem; | |
| 111 | + width: 1px; | |
| 112 | + bottom:0; | |
| 113 | + background-color: $color-stroke-default-tertiary; | |
| 114 | + } | |
| 115 | + &:last-of-type { | |
| 116 | + &::before { | |
| 117 | + display: none; | |
| 118 | + } | |
| 119 | + } | |
| 120 | + } | |
| 121 | + } | |
| 122 | + .profile-img-area { | |
| 123 | + figure { | |
| 124 | + width: 2.4rem; | |
| 125 | + height: 2.4rem; | |
| 126 | + } | |
| 127 | + } | |
| 128 | + .reply-tit-area { | |
| 129 | + .l-area { | |
| 130 | + flex-direction: row; | |
| 131 | + align-items: center; | |
| 132 | + } | |
| 133 | + } | |
| 134 | + .txt-area { | |
| 135 | + padding:0; | |
| 136 | + display: flex; | |
| 137 | + flex-direction: column; | |
| 138 | + gap: $spacing-sm; | |
| 139 | + } | |
| 140 | + } | |
| 141 | + .reply-write-area { | |
| 142 | + display: flex; | |
| 143 | + gap: $spacing-md; | |
| 144 | + align-items: flex-start; | |
| 145 | + .reply-tit-area { | |
| 146 | + .l-area { | |
| 147 | + flex-direction: row; | |
| 148 | + align-items: center; | |
| 149 | + } | |
| 150 | + } | |
| 151 | + .txt-area { | |
| 152 | + flex:1; | |
| 153 | + display: flex; | |
| 154 | + flex-direction: column; | |
| 155 | + gap:$spacing-xsm; | |
| 156 | + } | |
| 157 | + .write { | |
| 158 | + display: flex; | |
| 159 | + flex-direction: column; | |
| 160 | + gap:$spacing-xsm; | |
| 161 | + width: 100%; | |
| 162 | + border:$stroke-primary; | |
| 163 | + border-radius: $radius-sm; | |
| 164 | + padding:$spacing-md; | |
| 165 | + background-color: $color-background-default-primary; | |
| 166 | + textarea { | |
| 167 | + border:none; | |
| 168 | + background-color: $color-transparent; | |
| 169 | + min-height: 4rem; | |
| 170 | + padding:0; | |
| 171 | + &:focus { | |
| 172 | + border:none; | |
| 173 | + box-shadow: none; | |
| 174 | + } | |
| 175 | + } | |
| 176 | + } | |
| 177 | + .img-add-area { | |
| 178 | + position: relative; | |
| 179 | + border:$stroke-secondary; | |
| 180 | + border-radius: $radius-sm; | |
| 181 | + overflow: hidden; | |
| 182 | + width: 16rem; | |
| 183 | + aspect-ratio: 1; | |
| 184 | + object-fit: cover; | |
| 185 | + img { | |
| 186 | + display: block; | |
| 187 | + width: 100%; | |
| 188 | + height: 100%; | |
| 189 | + } | |
| 190 | + .btn { | |
| 191 | + position: absolute; | |
| 192 | + right:$spacing-2xsm; | |
| 193 | + top:$spacing-2xsm; | |
| 194 | + } | |
| 195 | + } | |
| 196 | + .write-fnc-area { | |
| 197 | + @extend %flexArea; | |
| 198 | + } | |
| 199 | + } | |
| 200 | + &.lg, | |
| 201 | + &.xlg { | |
| 202 | + .txt-area { | |
| 203 | + .profile-tit { | |
| 204 | + font-size:$size-font-md; | |
| 205 | + font-weight: $size-font-weight-xlg; | |
| 206 | + } | |
| 207 | + } | |
| 208 | + } | |
| 209 | + &.lg { | |
| 210 | + gap: $spacing-sm; | |
| 211 | + .img-area { | |
| 212 | + figure { | |
| 213 | + width: 5.6rem; | |
| 214 | + height: 5.6rem; | |
| 215 | + } | |
| 216 | + } | |
| 217 | + } | |
| 218 | + &.xlg { | |
| 219 | + flex-direction: column; | |
| 220 | + justify-content: center; | |
| 221 | + .img-area { | |
| 222 | + figure { | |
| 223 | + width: 8rem; | |
| 224 | + height: 8rem; | |
| 225 | + } | |
| 226 | + } | |
| 227 | + .txt-area { | |
| 228 | + justify-content: center; | |
| 229 | + text-align: center; | |
| 230 | + } | |
| 231 | + } | |
| 232 | + &.sm { | |
| 233 | + .img-area { | |
| 234 | + figure { | |
| 235 | + width: 2.4rem; | |
| 236 | + height: 2.4rem; | |
| 237 | + } | |
| 238 | + } | |
| 239 | + } | |
| 240 | +} | |
| 241 | + | |
| 242 | +@include responsive(mobile) { | |
| 243 | + [data-responsive="true"]:root { | |
| 244 | + .reply-list { | |
| 245 | + >li { | |
| 246 | + >.profile-img-area { | |
| 247 | + display: none; | |
| 248 | + } | |
| 249 | + } | |
| 250 | + | |
| 251 | + } | |
| 252 | + } | |
| 253 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/util/_animation.scss
... | ... | @@ -0,0 +1,44 @@ |
| 1 | +/* animation */ | |
| 2 | +@keyframes opacity { | |
| 3 | + 0% { | |
| 4 | + opacity: 0; | |
| 5 | + } | |
| 6 | + | |
| 7 | + 100% { | |
| 8 | + opacity: 1; | |
| 9 | + } | |
| 10 | +} | |
| 11 | + | |
| 12 | +@keyframes filterall { | |
| 13 | + 0% { | |
| 14 | + opacity: 0; | |
| 15 | + margin-top: 0; | |
| 16 | + } | |
| 17 | + | |
| 18 | + 100% { | |
| 19 | + opacity: 1; | |
| 20 | + height: auto; | |
| 21 | + margin-top: .1rem; | |
| 22 | + } | |
| 23 | +} | |
| 24 | + | |
| 25 | +@keyframes opacityUp { | |
| 26 | + 0% { | |
| 27 | + opacity: 0; | |
| 28 | + margin-top: 3%; | |
| 29 | + } | |
| 30 | + 100% { | |
| 31 | + opacity: 1; | |
| 32 | + margin-top: 0; | |
| 33 | + } | |
| 34 | +} | |
| 35 | + | |
| 36 | + | |
| 37 | +@keyframes modalShow { | |
| 38 | + 0% { | |
| 39 | + transform: translateX(100%); | |
| 40 | + } | |
| 41 | + 100% { | |
| 42 | + transform: translateX(0); | |
| 43 | + } | |
| 44 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/vendors/_vendor.scss
... | ... | @@ -0,0 +1,569 @@ |
| 1 | +/* ------------------------------------------------- | |
| 2 | + SORT | |
| 3 | +------------------------------------------------- */ | |
| 4 | +.sort { | |
| 5 | + margin-bottom: 4rem; | |
| 6 | + font-size: 0; | |
| 7 | + margin-left: -1rem; | |
| 8 | + text-align: center; | |
| 9 | + display: flex; | |
| 10 | + justify-content: center; | |
| 11 | + a, | |
| 12 | + button, | |
| 13 | + .ui-checkboxradio-label { | |
| 14 | + display: inline-block; | |
| 15 | + font-size: 2.4rem; | |
| 16 | + color: #777; | |
| 17 | + width: 26rem; | |
| 18 | + height: 10rem; | |
| 19 | + /* line-height: 9.8rem; */ | |
| 20 | + box-sizing: border-box; | |
| 21 | + border: $stroke-secondary; | |
| 22 | + border-radius: 3rem; | |
| 23 | + text-align: center; | |
| 24 | + margin: 0 0 1rem 1rem; | |
| 25 | + transition: box-shadow 0.3s; | |
| 26 | + font-weight: 500; | |
| 27 | + padding: 0 2rem; | |
| 28 | + word-break: keep-all; | |
| 29 | + &:not(.is-active):hover, | |
| 30 | + &:not(.is-active):focus { | |
| 31 | + border-color: $color-stroke-default-secondary; | |
| 32 | + background-color: $color-background-default-secondary; | |
| 33 | + } | |
| 34 | + } | |
| 35 | + .is-active, | |
| 36 | + .ui-checkboxradio-label.ui-state-active { | |
| 37 | + color: $spot; | |
| 38 | + border-color: $spot; | |
| 39 | + } | |
| 40 | + .ui-checkboxradio-icon, | |
| 41 | + .ui-checkboxradio-icon-space { | |
| 42 | + display: none; | |
| 43 | + } | |
| 44 | + .ui-checkboxradio-icon:after { | |
| 45 | + display: none; | |
| 46 | + } | |
| 47 | +} | |
| 48 | +/* jquery-plugin : datepicker */ | |
| 49 | +.datepicker-box { | |
| 50 | + position: relative; | |
| 51 | + display: inline-block; | |
| 52 | +} | |
| 53 | +.datepicker-box.block { | |
| 54 | + display: block; | |
| 55 | +} | |
| 56 | +.datepicker-box + .dash { | |
| 57 | + margin: 0 2rem 0 -3rem !important; | |
| 58 | +} | |
| 59 | +input[type=text].datepicker { | |
| 60 | + display: inline-block !important; | |
| 61 | + width: 19rem !important; | |
| 62 | + margin-right: 2rem; | |
| 63 | +} | |
| 64 | +.ui-datepicker-trigger { | |
| 65 | + display: inline-block; | |
| 66 | + width: 3rem; | |
| 67 | + height: 3rem; | |
| 68 | + vertical-align: middle; | |
| 69 | + padding: 0; | |
| 70 | +} | |
| 71 | +.ui-datepicker-trigger img { | |
| 72 | + display: block; | |
| 73 | + width: 100%; | |
| 74 | +} | |
| 75 | +.ui-datepicker { | |
| 76 | + background-color: $color-background-default-primary; | |
| 77 | + margin-top: -0.2rem; | |
| 78 | + border: 0.1rem solid #ccc; | |
| 79 | + width: 100%; | |
| 80 | + max-width: 30rem; | |
| 81 | + padding: 2rem 1rem 1rem; | |
| 82 | + display: none; | |
| 83 | + box-shadow: 0.4rem 0.4rem 0 rgba(0, 0, 0, 0.1); | |
| 84 | + box-sizing: border-box; | |
| 85 | + margin: 0 auto; | |
| 86 | + z-index: 1; | |
| 87 | +} | |
| 88 | +.ui-datepicker .ui-datepicker-header { | |
| 89 | + position: relative; | |
| 90 | + padding: 0 7rem 0 0; | |
| 91 | +} | |
| 92 | +.ui-datepicker .ui-datepicker-prev, | |
| 93 | +.ui-datepicker .ui-datepicker-next { | |
| 94 | + overflow: hidden; | |
| 95 | + position: absolute; | |
| 96 | + top: 0; | |
| 97 | + width: 3rem; | |
| 98 | + height: 3rem; | |
| 99 | + text-indent: -999px; | |
| 100 | + background-repeat: no-repeat; | |
| 101 | + cursor: pointer; | |
| 102 | + background-color: $color-background-default-primary-inverse; | |
| 103 | + border-radius: 50%; | |
| 104 | +} | |
| 105 | +.ui-datepicker .ui-datepicker-prev { | |
| 106 | + right: 4rem; | |
| 107 | +} | |
| 108 | +.ui-datepicker .ui-datepicker-next { | |
| 109 | + right: 0.5rem; | |
| 110 | +} | |
| 111 | +.ui-datepicker .ui-datepicker-prev span, | |
| 112 | +.ui-datepicker .ui-datepicker-next span { | |
| 113 | + position: absolute; | |
| 114 | + top: 50%; | |
| 115 | + left: 50%; | |
| 116 | + margin-top: -0.4rem; | |
| 117 | + margin-left: -0.3rem; | |
| 118 | + width: 0.7rem; | |
| 119 | + height: 0.7rem; | |
| 120 | + border-top: 0.2rem solid $color-white; | |
| 121 | + border-top: 0.2rem solid $color-white; | |
| 122 | + -webkit-transform: rotate(-45deg); | |
| 123 | + -moz-transform: rotate(-45deg); | |
| 124 | + -ms-transform: rotate(-45deg); | |
| 125 | + transform: rotate(-45deg); | |
| 126 | +} | |
| 127 | +.ui-datepicker .ui-datepicker-next span { | |
| 128 | + /*left: auto; | |
| 129 | + right: 50%; | |
| 130 | + margin-right: -0.1rem;*/ | |
| 131 | + -webkit-transform: rotate(135deg); | |
| 132 | + -moz-transform: rotate(135deg); | |
| 133 | + -ms-transform: rotate(135deg); | |
| 134 | + transform: rotate(135deg); | |
| 135 | +} | |
| 136 | +.ui-datepicker .ui-datepicker-title { | |
| 137 | + font-size: 1.6rem; | |
| 138 | + font-weight: 900; | |
| 139 | + margin: 0; | |
| 140 | + line-height: 3rem; | |
| 141 | + text-align: left; | |
| 142 | +} | |
| 143 | +.ui-datepicker select.ui-datepicker-month, | |
| 144 | +.ui-datepicker select.ui-datepicker-year { | |
| 145 | + width: 8rem; | |
| 146 | + vertical-align: middle; | |
| 147 | + height: 3rem; | |
| 148 | + font-size: 1.5rem; | |
| 149 | + padding-left: 1rem; | |
| 150 | + padding-right: 3rem; | |
| 151 | +} | |
| 152 | +.ui-datepicker select.ui-datepicker-year { | |
| 153 | + margin-right: 0.5rem; | |
| 154 | +} | |
| 155 | +.ui-datepicker table { | |
| 156 | + width: 100%; | |
| 157 | + font-size: 0.9rem; | |
| 158 | + border-collapse: collapse; | |
| 159 | + margin: 1rem 0 0.2rem; | |
| 160 | + text-align: center; | |
| 161 | +} | |
| 162 | +.ui-datepicker th { | |
| 163 | + padding: 0.3rem 0.3rem; | |
| 164 | + color: $color-font-default-primary; | |
| 165 | + text-align: center; | |
| 166 | + /*height: 14px;*/ | |
| 167 | + font-size: 1.4rem; | |
| 168 | + font-weight: bold; | |
| 169 | + border: 0; | |
| 170 | +} | |
| 171 | +.ui-datepicker th.ui-datepicker-week-end span[title=Sunday] { | |
| 172 | + color: $color-red50; | |
| 173 | +} | |
| 174 | +.ui-datepicker td:first-child a { | |
| 175 | + color: $color-red50; | |
| 176 | +} | |
| 177 | +.ui-datepicker tr:first-child td { | |
| 178 | + border-top: 0; | |
| 179 | +} | |
| 180 | +.ui-datepicker td { | |
| 181 | + text-align: center; | |
| 182 | + padding: 0.2rem 0; | |
| 183 | + border: 0; | |
| 184 | + height: 1.4rem; | |
| 185 | +} | |
| 186 | +.ui-datepicker td span, | |
| 187 | +.ui-datepicker td a { | |
| 188 | + display: block; | |
| 189 | + position: relative; | |
| 190 | + width: 3rem; | |
| 191 | + height: 3rem; | |
| 192 | + line-height: 3rem; | |
| 193 | + border-radius: 50%; | |
| 194 | + text-decoration: none; | |
| 195 | + border-bottom: 0; | |
| 196 | + margin: 0 auto; | |
| 197 | + color: $color-font-default-primary; | |
| 198 | + font-size: 1.4rem; | |
| 199 | +} | |
| 200 | +.ui-datepicker .ui-datepicker-buttonpane { | |
| 201 | + background-image: none; | |
| 202 | + margin: 0.7rem 0 0 0; | |
| 203 | + padding: 0.2rem; | |
| 204 | + border-left: 0; | |
| 205 | + border-right: 0; | |
| 206 | + border-bottom: 0; | |
| 207 | +} | |
| 208 | +.ui-datepicker .ui-datepicker-buttonpane button { | |
| 209 | + float: right; | |
| 210 | + margin: 0.5rem 0.2rem 0.4rem; | |
| 211 | + cursor: pointer; | |
| 212 | + padding: 0.2rem 0.6rem 0.3rem 0.6rem; | |
| 213 | + width: auto; | |
| 214 | + overflow: visible; | |
| 215 | +} | |
| 216 | +.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { | |
| 217 | + float: left; | |
| 218 | +} | |
| 219 | +.due { | |
| 220 | + display: inline-block; | |
| 221 | + vertical-align: middle; | |
| 222 | + margin: 0 1rem; | |
| 223 | + font-size: 1.5rem; | |
| 224 | + color: $color-font-default-primary; | |
| 225 | + position: relative; | |
| 226 | + top: 0.3rem; | |
| 227 | +} | |
| 228 | +.ui-datepicker .ui-state-highlight { | |
| 229 | + background: $color-background-default-tertiary; | |
| 230 | + color: #000; | |
| 231 | + border-radius: 50%; | |
| 232 | +} | |
| 233 | +.ui-datepicker .highlight2 { | |
| 234 | + background: #6a6f8d; | |
| 235 | + color: $color-white; | |
| 236 | + border-radius: 50%; | |
| 237 | +} | |
| 238 | +.ui-datepicker .highlight3 { | |
| 239 | + background: $color-background-default-primary; | |
| 240 | + border: 0.2rem solid #ffb100; | |
| 241 | + line-height: 1.6rem; | |
| 242 | + box-sizing: border-box; | |
| 243 | + color: #000; | |
| 244 | +} | |
| 245 | + | |
| 246 | +/* jquery-plugin dialog */ | |
| 247 | +.ui-widget-overlay { | |
| 248 | + position: fixed; | |
| 249 | + width: 100%; | |
| 250 | + height: 500%; | |
| 251 | + top: 0; | |
| 252 | + left: 0; | |
| 253 | + background: $color-background-default-primary; | |
| 254 | + opacity: 0; | |
| 255 | + z-index: 99999; | |
| 256 | +} | |
| 257 | +.ui-dialog { | |
| 258 | + position: absolute; | |
| 259 | + padding-bottom: 4rem; | |
| 260 | + background: $color-background-default-primary; | |
| 261 | + top: 14rem; | |
| 262 | + z-index: 999; | |
| 263 | + overflow: auto; | |
| 264 | + max-width: calc(100% - 5rem); | |
| 265 | + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); | |
| 266 | +} | |
| 267 | +.ui-dialog .ui-dialog-titlebar { | |
| 268 | + position: relative; | |
| 269 | + height: 15rem; | |
| 270 | + padding: 5rem 2rem 2rem; | |
| 271 | + box-sizing: border-box; | |
| 272 | +} | |
| 273 | +.ui-dialog .ui-dialog-title { | |
| 274 | + display: block; | |
| 275 | + height: 7rem; | |
| 276 | + line-height: 7rem; | |
| 277 | + text-align: center; | |
| 278 | + font-size: 2.8rem; | |
| 279 | + font-weight: 700; | |
| 280 | +} | |
| 281 | +.ui-dialog .ui-dialog-titlebar-close { | |
| 282 | + position: absolute; | |
| 283 | + width: 3rem; | |
| 284 | + height: 3rem; | |
| 285 | + overflow: hidden; | |
| 286 | + text-indent: -999px; | |
| 287 | + top: 1.5rem; | |
| 288 | + right: 1.5rem; | |
| 289 | + background: rgba(255, 255, 255, 0.3); | |
| 290 | +} | |
| 291 | +.ui-dialog .ui-dialog-titlebar-close:before, | |
| 292 | +.ui-dialog .ui-dialog-titlebar-close:after { | |
| 293 | + content: ""; | |
| 294 | + position: absolute; | |
| 295 | + width: 140%; | |
| 296 | + height: 2rem; | |
| 297 | + background-color: $color-background-default-primary-inverse; | |
| 298 | + top: 50%; | |
| 299 | + left: 50%; | |
| 300 | + margin-left: -70%; | |
| 301 | + margin-top: -1rem; | |
| 302 | +} | |
| 303 | +.ui-dialog .ui-dialog-titlebar-close:before { | |
| 304 | + -webkit-transform: rotate(45deg); | |
| 305 | + -moz-transform: rotate(45deg); | |
| 306 | + transform: rotate(45deg); | |
| 307 | +} | |
| 308 | +.ui-dialog .ui-dialog-titlebar-close:after { | |
| 309 | + -webkit-transform: rotate(-45deg); | |
| 310 | + -moz-transform: rotate(-45deg); | |
| 311 | + transform: rotate(-45deg); | |
| 312 | +} | |
| 313 | +.ui-dialog .ui-dialog-content { | |
| 314 | + position: relative; | |
| 315 | + border: 0; | |
| 316 | + padding: 0 4rem; | |
| 317 | + background: none; | |
| 318 | + overflow: auto; | |
| 319 | +} | |
| 320 | +.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { | |
| 321 | + margin-top: 2rem; | |
| 322 | + text-align: center; | |
| 323 | +} | |
| 324 | +.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button { | |
| 325 | + display: inline-block; | |
| 326 | + padding: 0 1.5rem; | |
| 327 | + height: 6rem; | |
| 328 | + line-height: 5.8rem; | |
| 329 | + font-size: 1.8rem; | |
| 330 | + min-width: 8rem; | |
| 331 | + border-radius: 2em; | |
| 332 | + margin: 0 0.3rem; | |
| 333 | + padding: 0 5rem; | |
| 334 | + height: 6rem; | |
| 335 | + line-height: 5.8rem; | |
| 336 | + font-size: 2rem; | |
| 337 | +} | |
| 338 | +.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .spot { | |
| 339 | + background-color: $spot; | |
| 340 | + border-color: $spot; | |
| 341 | + color: $color-white; | |
| 342 | +} | |
| 343 | +.ui-dialog .ui-resizable-se { | |
| 344 | + width: 1.2rem; | |
| 345 | + height: 1.2rem; | |
| 346 | + right: -0.5rem; | |
| 347 | + bottom: -0.5rem; | |
| 348 | + background-position: 1.4rem; | |
| 349 | +} | |
| 350 | +.ui-draggable .ui-dialog-titlebar { | |
| 351 | + cursor: move; | |
| 352 | +} | |
| 353 | + | |
| 354 | +/* ui-autocomplete */ | |
| 355 | +.ui-autocomplete { | |
| 356 | + position: absolute; | |
| 357 | + top: 0; | |
| 358 | + left: 0; | |
| 359 | + cursor: default; | |
| 360 | + z-index:101; | |
| 361 | + max-height: 30rem; | |
| 362 | + overflow-y: auto; | |
| 363 | + box-sizing: border-box; | |
| 364 | + box-shadow: $shadow-md; | |
| 365 | +} | |
| 366 | +.ui-autocomplete.ui-widget-content { | |
| 367 | + border: 0.1rem solid $color-black; | |
| 368 | + background: $color-background-default-primary; | |
| 369 | +} | |
| 370 | +.ui-autocomplete .ui-menu-item { | |
| 371 | +} | |
| 372 | +.ui-autocomplete .ui-menu-item:hover, | |
| 373 | +.ui-autocomplete .ui-menu-item:focus { | |
| 374 | + background: $color-background-default-primary; | |
| 375 | +} | |
| 376 | +.ui-autocomplete .ui-menu-item > div { | |
| 377 | + padding: 0.6rem 1.6rem; | |
| 378 | +} | |
| 379 | +.ui-autocomplete .ui-menu-item .ui-state-hover, | |
| 380 | +.ui-autocomplete .ui-menu-item .ui-state-focus, | |
| 381 | +.ui-autocomplete .ui-menu-item .ui-state-active { | |
| 382 | + display: block; | |
| 383 | + background: rgba(0, 51, 255, 0.1); | |
| 384 | + border: none; | |
| 385 | +} | |
| 386 | +.ui-helper-hidden-accessible { | |
| 387 | + position: absolute; | |
| 388 | + left: -9999px; | |
| 389 | +} | |
| 390 | +.autocomplete-area { | |
| 391 | + position: relative; | |
| 392 | +} | |
| 393 | +.ui-menu { | |
| 394 | + max-width: 100%; | |
| 395 | + word-break: break-all; | |
| 396 | +} | |
| 397 | + | |
| 398 | +/* swiper */ | |
| 399 | +.swiper-pagination-bullet-active { | |
| 400 | + background-color: $spot; | |
| 401 | +} | |
| 402 | +.swiper-fnc { | |
| 403 | + .swiper-button-prev, | |
| 404 | + .swiper-button-next { | |
| 405 | + position: absolute; | |
| 406 | + top: 50%; | |
| 407 | + transform: translateY(-50%); | |
| 408 | + margin: 0; | |
| 409 | + display: block; | |
| 410 | + width: 4.8rem; | |
| 411 | + height: 4.8rem; | |
| 412 | + text-indent: -99999px; | |
| 413 | + border-radius: 50%; | |
| 414 | + background-color: rgba(255, 255, 255, 0.8); | |
| 415 | + z-index: 3; | |
| 416 | + &:after { | |
| 417 | + content: " "; | |
| 418 | + position: absolute; | |
| 419 | + left: 50%; | |
| 420 | + top: 50%; | |
| 421 | + transform: translate(-50%, -50%); | |
| 422 | + @include ico($size-icon-md, pv, $color-icon-default-primary); | |
| 423 | + } | |
| 424 | + &.swiper-button-disabled { | |
| 425 | + display: none; | |
| 426 | + } | |
| 427 | + } | |
| 428 | + .swiper-button-next { | |
| 429 | + &::after { | |
| 430 | + transform: translate(-50%, -50%) rotate(180deg); | |
| 431 | + } | |
| 432 | + } | |
| 433 | + .swiper-button-next { | |
| 434 | + right: 0; | |
| 435 | + } | |
| 436 | +} | |
| 437 | +.swiper-progress { | |
| 438 | + position: relative; | |
| 439 | + display: flex; | |
| 440 | + height: .2rem; | |
| 441 | + width: 7.2rem; | |
| 442 | + border-radius: .1rem; | |
| 443 | + background-color: $color-background-brand-primary; | |
| 444 | + z-index: 10; | |
| 445 | + .swiper-progress-bar { | |
| 446 | + position: absolute; | |
| 447 | + top:0; | |
| 448 | + left:0; | |
| 449 | + width: 0; | |
| 450 | + height: 100%; | |
| 451 | + background-color: $spot; | |
| 452 | + transition: width 3s linear; | |
| 453 | + } | |
| 454 | +} | |
| 455 | + | |
| 456 | +.swiper-fnc-static { | |
| 457 | + display:flex; | |
| 458 | + align-items: center; | |
| 459 | + z-index: 3; | |
| 460 | + &:has(.circle) { | |
| 461 | + gap:$spacing-2xsm; | |
| 462 | + } | |
| 463 | + .swiper-progress { | |
| 464 | + margin-right:$spacing-sm; | |
| 465 | + } | |
| 466 | + .swiper-button-prev, | |
| 467 | + .swiper-button-next, | |
| 468 | + .swiper-btn-playstop-toggle { | |
| 469 | + position: relative; | |
| 470 | + inset: inherit; | |
| 471 | + margin: initial; | |
| 472 | + display: block; | |
| 473 | + width: 2.4rem; | |
| 474 | + height: 2.4rem; | |
| 475 | + text-indent: -99999px; | |
| 476 | + font-size:0; | |
| 477 | + &:after { | |
| 478 | + content: " "; | |
| 479 | + position: absolute; | |
| 480 | + top:50%; | |
| 481 | + left: 50%; | |
| 482 | + transform: translate(-50%, -50%); | |
| 483 | + } | |
| 484 | + &.swiper-button-disabled { | |
| 485 | + opacity:.4; | |
| 486 | + } | |
| 487 | + &.lg { | |
| 488 | + width:4rem; | |
| 489 | + height: 4rem; | |
| 490 | + } | |
| 491 | + &.circle { | |
| 492 | + border:$stroke-primary; | |
| 493 | + border-radius: $radius-full; | |
| 494 | + } | |
| 495 | + } | |
| 496 | + .swiper-button-prev { | |
| 497 | + &:after { | |
| 498 | + @include ico($size-icon-sm, pv, $color-icon-brand-primary); | |
| 499 | + } | |
| 500 | + &.lg { | |
| 501 | + &:after { | |
| 502 | + @include ico($size-icon-md, arrow-left, $color-icon-brand-primary); | |
| 503 | + } | |
| 504 | + } | |
| 505 | + } | |
| 506 | + .swiper-button-next { | |
| 507 | + &:after { | |
| 508 | + @include ico($size-icon-sm, fw, $color-icon-brand-primary); | |
| 509 | + | |
| 510 | + } | |
| 511 | + &.lg { | |
| 512 | + &:after { | |
| 513 | + @include ico($size-icon-md, arrow-right, $color-icon-brand-primary); | |
| 514 | + } | |
| 515 | + } | |
| 516 | + } | |
| 517 | + .swiper-btn-playstop-toggle { | |
| 518 | + &:after { | |
| 519 | + @include ico($size-icon-sm, pause, $color-icon-brand-primary); | |
| 520 | + } | |
| 521 | + &.is-stop { | |
| 522 | + &:after{ | |
| 523 | + @include ico($size-icon-sm, play, $color-icon-brand-primary); | |
| 524 | + } | |
| 525 | + } | |
| 526 | + } | |
| 527 | +} | |
| 528 | + | |
| 529 | +// tagify | |
| 530 | +.tagify__input { | |
| 531 | + font-weight: 400; | |
| 532 | + color:$color-font-default-secondary; | |
| 533 | + margin-left:0; | |
| 534 | + padding-left:8px; | |
| 535 | + margin: 2px 0 2px 4px; | |
| 536 | + &::before { | |
| 537 | + color:$color-font-default-secondary; | |
| 538 | + } | |
| 539 | +} | |
| 540 | +.tagify__tag { | |
| 541 | + border:1px solid $spot; | |
| 542 | + border-radius: 16px; | |
| 543 | + color:$spot; | |
| 544 | + padding: 0 8px; | |
| 545 | + margin: 2px 0 2px 4px; | |
| 546 | + box-sizing: border-box; | |
| 547 | + color:$spot; | |
| 548 | + >div { | |
| 549 | + color:$spot; | |
| 550 | + &::before { | |
| 551 | + display: none; | |
| 552 | + } | |
| 553 | + } | |
| 554 | + .tagify__tag__removeBtn { | |
| 555 | + margin: 0; | |
| 556 | + @include ico($size-icon-sm, close); | |
| 557 | + &:hover { | |
| 558 | + background: none; | |
| 559 | + @include ico($size-icon-sm, close); | |
| 560 | + } | |
| 561 | + } | |
| 562 | + .tagify__tag__removeBtn::after { | |
| 563 | + content: " "; | |
| 564 | + display:none; | |
| 565 | + } | |
| 566 | +} | |
| 567 | +.input-tag { | |
| 568 | + border:none; | |
| 569 | +}(파일 끝에 줄바꿈 문자 없음) |
+++ resources/front/site/SITE_00000/css/common/vendors/animate.css
... | ... | @@ -0,0 +1,4072 @@ |
| 1 | +/*! | |
| 2 | + * animate.css - https://animate.style/ | |
| 3 | + * Version - 4.1.1 | |
| 4 | + * Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev | |
| 5 | + * | |
| 6 | + * Copyright (c) 2022 Animate.css | |
| 7 | + */ | |
| 8 | +:root { | |
| 9 | + --animate-duration: 1s; | |
| 10 | + --animate-delay: 1s; | |
| 11 | + --animate-repeat: 1; | |
| 12 | +} | |
| 13 | +.animate__animated { | |
| 14 | + -webkit-animation-duration: 1s; | |
| 15 | + animation-duration: 1s; | |
| 16 | + -webkit-animation-duration: var(--animate-duration); | |
| 17 | + animation-duration: var(--animate-duration); | |
| 18 | + -webkit-animation-fill-mode: both; | |
| 19 | + animation-fill-mode: both; | |
| 20 | +} | |
| 21 | +.animate__animated.animate__infinite { | |
| 22 | + -webkit-animation-iteration-count: infinite; | |
| 23 | + animation-iteration-count: infinite; | |
| 24 | +} | |
| 25 | +.animate__animated.animate__repeat-1 { | |
| 26 | + -webkit-animation-iteration-count: 1; | |
| 27 | + animation-iteration-count: 1; | |
| 28 | + -webkit-animation-iteration-count: var(--animate-repeat); | |
| 29 | + animation-iteration-count: var(--animate-repeat); | |
| 30 | +} | |
| 31 | +.animate__animated.animate__repeat-2 { | |
| 32 | + -webkit-animation-iteration-count: calc(1 * 2); | |
| 33 | + animation-iteration-count: calc(1 * 2); | |
| 34 | + -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2); | |
| 35 | + animation-iteration-count: calc(var(--animate-repeat) * 2); | |
| 36 | +} | |
| 37 | +.animate__animated.animate__repeat-3 { | |
| 38 | + -webkit-animation-iteration-count: calc(1 * 3); | |
| 39 | + animation-iteration-count: calc(1 * 3); | |
| 40 | + -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3); | |
| 41 | + animation-iteration-count: calc(var(--animate-repeat) * 3); | |
| 42 | +} | |
| 43 | +.animate__animated.animate__delay-1s { | |
| 44 | + -webkit-animation-delay: 1s; | |
| 45 | + animation-delay: 1s; | |
| 46 | + -webkit-animation-delay: var(--animate-delay); | |
| 47 | + animation-delay: var(--animate-delay); | |
| 48 | +} | |
| 49 | +.animate__animated.animate__delay-2s { | |
| 50 | + -webkit-animation-delay: calc(1s * 2); | |
| 51 | + animation-delay: calc(1s * 2); | |
| 52 | + -webkit-animation-delay: calc(var(--animate-delay) * 2); | |
| 53 | + animation-delay: calc(var(--animate-delay) * 2); | |
| 54 | +} | |
| 55 | +.animate__animated.animate__delay-3s { | |
| 56 | + -webkit-animation-delay: calc(1s * 3); | |
| 57 | + animation-delay: calc(1s * 3); | |
| 58 | + -webkit-animation-delay: calc(var(--animate-delay) * 3); | |
| 59 | + animation-delay: calc(var(--animate-delay) * 3); | |
| 60 | +} | |
| 61 | +.animate__animated.animate__delay-4s { | |
| 62 | + -webkit-animation-delay: calc(1s * 4); | |
| 63 | + animation-delay: calc(1s * 4); | |
| 64 | + -webkit-animation-delay: calc(var(--animate-delay) * 4); | |
| 65 | + animation-delay: calc(var(--animate-delay) * 4); | |
| 66 | +} | |
| 67 | +.animate__animated.animate__delay-5s { | |
| 68 | + -webkit-animation-delay: calc(1s * 5); | |
| 69 | + animation-delay: calc(1s * 5); | |
| 70 | + -webkit-animation-delay: calc(var(--animate-delay) * 5); | |
| 71 | + animation-delay: calc(var(--animate-delay) * 5); | |
| 72 | +} | |
| 73 | +.animate__animated.animate__faster { | |
| 74 | + -webkit-animation-duration: calc(1s / 2); | |
| 75 | + animation-duration: calc(1s / 2); | |
| 76 | + -webkit-animation-duration: calc(var(--animate-duration) / 2); | |
| 77 | + animation-duration: calc(var(--animate-duration) / 2); | |
| 78 | +} | |
| 79 | +.animate__animated.animate__fast { | |
| 80 | + -webkit-animation-duration: calc(1s * 0.8); | |
| 81 | + animation-duration: calc(1s * 0.8); | |
| 82 | + -webkit-animation-duration: calc(var(--animate-duration) * 0.8); | |
| 83 | + animation-duration: calc(var(--animate-duration) * 0.8); | |
| 84 | +} | |
| 85 | +.animate__animated.animate__slow { | |
| 86 | + -webkit-animation-duration: calc(1s * 2); | |
| 87 | + animation-duration: calc(1s * 2); | |
| 88 | + -webkit-animation-duration: calc(var(--animate-duration) * 2); | |
| 89 | + animation-duration: calc(var(--animate-duration) * 2); | |
| 90 | +} | |
| 91 | +.animate__animated.animate__slower { | |
| 92 | + -webkit-animation-duration: calc(1s * 3); | |
| 93 | + animation-duration: calc(1s * 3); | |
| 94 | + -webkit-animation-duration: calc(var(--animate-duration) * 3); | |
| 95 | + animation-duration: calc(var(--animate-duration) * 3); | |
| 96 | +} | |
| 97 | +@media print, (prefers-reduced-motion: reduce) { | |
| 98 | + .animate__animated { | |
| 99 | + -webkit-animation-duration: 1ms !important; | |
| 100 | + animation-duration: 1ms !important; | |
| 101 | + -webkit-transition-duration: 1ms !important; | |
| 102 | + transition-duration: 1ms !important; | |
| 103 | + -webkit-animation-iteration-count: 1 !important; | |
| 104 | + animation-iteration-count: 1 !important; | |
| 105 | + } | |
| 106 | + | |
| 107 | + .animate__animated[class*='Out'] { | |
| 108 | + opacity: 0; | |
| 109 | + } | |
| 110 | +} | |
| 111 | +/* Attention seekers */ | |
| 112 | +@-webkit-keyframes bounce { | |
| 113 | + from, | |
| 114 | + 20%, | |
| 115 | + 53%, | |
| 116 | + to { | |
| 117 | + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 118 | + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 119 | + -webkit-transform: translate3d(0, 0, 0); | |
| 120 | + transform: translate3d(0, 0, 0); | |
| 121 | + } | |
| 122 | + | |
| 123 | + 40%, | |
| 124 | + 43% { | |
| 125 | + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
| 126 | + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
| 127 | + -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); | |
| 128 | + transform: translate3d(0, -30px, 0) scaleY(1.1); | |
| 129 | + } | |
| 130 | + | |
| 131 | + 70% { | |
| 132 | + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
| 133 | + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
| 134 | + -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); | |
| 135 | + transform: translate3d(0, -15px, 0) scaleY(1.05); | |
| 136 | + } | |
| 137 | + | |
| 138 | + 80% { | |
| 139 | + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 140 | + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 141 | + -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); | |
| 142 | + transform: translate3d(0, 0, 0) scaleY(0.95); | |
| 143 | + } | |
| 144 | + | |
| 145 | + 90% { | |
| 146 | + -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); | |
| 147 | + transform: translate3d(0, -4px, 0) scaleY(1.02); | |
| 148 | + } | |
| 149 | +} | |
| 150 | +@keyframes bounce { | |
| 151 | + from, | |
| 152 | + 20%, | |
| 153 | + 53%, | |
| 154 | + to { | |
| 155 | + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 156 | + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 157 | + -webkit-transform: translate3d(0, 0, 0); | |
| 158 | + transform: translate3d(0, 0, 0); | |
| 159 | + } | |
| 160 | + | |
| 161 | + 40%, | |
| 162 | + 43% { | |
| 163 | + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
| 164 | + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
| 165 | + -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1); | |
| 166 | + transform: translate3d(0, -30px, 0) scaleY(1.1); | |
| 167 | + } | |
| 168 | + | |
| 169 | + 70% { | |
| 170 | + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
| 171 | + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
| 172 | + -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05); | |
| 173 | + transform: translate3d(0, -15px, 0) scaleY(1.05); | |
| 174 | + } | |
| 175 | + | |
| 176 | + 80% { | |
| 177 | + -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 178 | + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 179 | + -webkit-transform: translate3d(0, 0, 0) scaleY(0.95); | |
| 180 | + transform: translate3d(0, 0, 0) scaleY(0.95); | |
| 181 | + } | |
| 182 | + | |
| 183 | + 90% { | |
| 184 | + -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02); | |
| 185 | + transform: translate3d(0, -4px, 0) scaleY(1.02); | |
| 186 | + } | |
| 187 | +} | |
| 188 | +.animate__bounce { | |
| 189 | + -webkit-animation-name: bounce; | |
| 190 | + animation-name: bounce; | |
| 191 | + -webkit-transform-origin: center bottom; | |
| 192 | + transform-origin: center bottom; | |
| 193 | +} | |
| 194 | +@-webkit-keyframes flash { | |
| 195 | + from, | |
| 196 | + 50%, | |
| 197 | + to { | |
| 198 | + opacity: 1; | |
| 199 | + } | |
| 200 | + | |
| 201 | + 25%, | |
| 202 | + 75% { | |
| 203 | + opacity: 0; | |
| 204 | + } | |
| 205 | +} | |
| 206 | +@keyframes flash { | |
| 207 | + from, | |
| 208 | + 50%, | |
| 209 | + to { | |
| 210 | + opacity: 1; | |
| 211 | + } | |
| 212 | + | |
| 213 | + 25%, | |
| 214 | + 75% { | |
| 215 | + opacity: 0; | |
| 216 | + } | |
| 217 | +} | |
| 218 | +.animate__flash { | |
| 219 | + -webkit-animation-name: flash; | |
| 220 | + animation-name: flash; | |
| 221 | +} | |
| 222 | +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
| 223 | +@-webkit-keyframes pulse { | |
| 224 | + from { | |
| 225 | + -webkit-transform: scale3d(1, 1, 1); | |
| 226 | + transform: scale3d(1, 1, 1); | |
| 227 | + } | |
| 228 | + | |
| 229 | + 50% { | |
| 230 | + -webkit-transform: scale3d(1.05, 1.05, 1.05); | |
| 231 | + transform: scale3d(1.05, 1.05, 1.05); | |
| 232 | + } | |
| 233 | + | |
| 234 | + to { | |
| 235 | + -webkit-transform: scale3d(1, 1, 1); | |
| 236 | + transform: scale3d(1, 1, 1); | |
| 237 | + } | |
| 238 | +} | |
| 239 | +@keyframes pulse { | |
| 240 | + from { | |
| 241 | + -webkit-transform: scale3d(1, 1, 1); | |
| 242 | + transform: scale3d(1, 1, 1); | |
| 243 | + } | |
| 244 | + | |
| 245 | + 50% { | |
| 246 | + -webkit-transform: scale3d(1.05, 1.05, 1.05); | |
| 247 | + transform: scale3d(1.05, 1.05, 1.05); | |
| 248 | + } | |
| 249 | + | |
| 250 | + to { | |
| 251 | + -webkit-transform: scale3d(1, 1, 1); | |
| 252 | + transform: scale3d(1, 1, 1); | |
| 253 | + } | |
| 254 | +} | |
| 255 | +.animate__pulse { | |
| 256 | + -webkit-animation-name: pulse; | |
| 257 | + animation-name: pulse; | |
| 258 | + -webkit-animation-timing-function: ease-in-out; | |
| 259 | + animation-timing-function: ease-in-out; | |
| 260 | +} | |
| 261 | +@-webkit-keyframes rubberBand { | |
| 262 | + from { | |
| 263 | + -webkit-transform: scale3d(1, 1, 1); | |
| 264 | + transform: scale3d(1, 1, 1); | |
| 265 | + } | |
| 266 | + | |
| 267 | + 30% { | |
| 268 | + -webkit-transform: scale3d(1.25, 0.75, 1); | |
| 269 | + transform: scale3d(1.25, 0.75, 1); | |
| 270 | + } | |
| 271 | + | |
| 272 | + 40% { | |
| 273 | + -webkit-transform: scale3d(0.75, 1.25, 1); | |
| 274 | + transform: scale3d(0.75, 1.25, 1); | |
| 275 | + } | |
| 276 | + | |
| 277 | + 50% { | |
| 278 | + -webkit-transform: scale3d(1.15, 0.85, 1); | |
| 279 | + transform: scale3d(1.15, 0.85, 1); | |
| 280 | + } | |
| 281 | + | |
| 282 | + 65% { | |
| 283 | + -webkit-transform: scale3d(0.95, 1.05, 1); | |
| 284 | + transform: scale3d(0.95, 1.05, 1); | |
| 285 | + } | |
| 286 | + | |
| 287 | + 75% { | |
| 288 | + -webkit-transform: scale3d(1.05, 0.95, 1); | |
| 289 | + transform: scale3d(1.05, 0.95, 1); | |
| 290 | + } | |
| 291 | + | |
| 292 | + to { | |
| 293 | + -webkit-transform: scale3d(1, 1, 1); | |
| 294 | + transform: scale3d(1, 1, 1); | |
| 295 | + } | |
| 296 | +} | |
| 297 | +@keyframes rubberBand { | |
| 298 | + from { | |
| 299 | + -webkit-transform: scale3d(1, 1, 1); | |
| 300 | + transform: scale3d(1, 1, 1); | |
| 301 | + } | |
| 302 | + | |
| 303 | + 30% { | |
| 304 | + -webkit-transform: scale3d(1.25, 0.75, 1); | |
| 305 | + transform: scale3d(1.25, 0.75, 1); | |
| 306 | + } | |
| 307 | + | |
| 308 | + 40% { | |
| 309 | + -webkit-transform: scale3d(0.75, 1.25, 1); | |
| 310 | + transform: scale3d(0.75, 1.25, 1); | |
| 311 | + } | |
| 312 | + | |
| 313 | + 50% { | |
| 314 | + -webkit-transform: scale3d(1.15, 0.85, 1); | |
| 315 | + transform: scale3d(1.15, 0.85, 1); | |
| 316 | + } | |
| 317 | + | |
| 318 | + 65% { | |
| 319 | + -webkit-transform: scale3d(0.95, 1.05, 1); | |
| 320 | + transform: scale3d(0.95, 1.05, 1); | |
| 321 | + } | |
| 322 | + | |
| 323 | + 75% { | |
| 324 | + -webkit-transform: scale3d(1.05, 0.95, 1); | |
| 325 | + transform: scale3d(1.05, 0.95, 1); | |
| 326 | + } | |
| 327 | + | |
| 328 | + to { | |
| 329 | + -webkit-transform: scale3d(1, 1, 1); | |
| 330 | + transform: scale3d(1, 1, 1); | |
| 331 | + } | |
| 332 | +} | |
| 333 | +.animate__rubberBand { | |
| 334 | + -webkit-animation-name: rubberBand; | |
| 335 | + animation-name: rubberBand; | |
| 336 | +} | |
| 337 | +@-webkit-keyframes shakeX { | |
| 338 | + from, | |
| 339 | + to { | |
| 340 | + -webkit-transform: translate3d(0, 0, 0); | |
| 341 | + transform: translate3d(0, 0, 0); | |
| 342 | + } | |
| 343 | + | |
| 344 | + 10%, | |
| 345 | + 30%, | |
| 346 | + 50%, | |
| 347 | + 70%, | |
| 348 | + 90% { | |
| 349 | + -webkit-transform: translate3d(-10px, 0, 0); | |
| 350 | + transform: translate3d(-10px, 0, 0); | |
| 351 | + } | |
| 352 | + | |
| 353 | + 20%, | |
| 354 | + 40%, | |
| 355 | + 60%, | |
| 356 | + 80% { | |
| 357 | + -webkit-transform: translate3d(10px, 0, 0); | |
| 358 | + transform: translate3d(10px, 0, 0); | |
| 359 | + } | |
| 360 | +} | |
| 361 | +@keyframes shakeX { | |
| 362 | + from, | |
| 363 | + to { | |
| 364 | + -webkit-transform: translate3d(0, 0, 0); | |
| 365 | + transform: translate3d(0, 0, 0); | |
| 366 | + } | |
| 367 | + | |
| 368 | + 10%, | |
| 369 | + 30%, | |
| 370 | + 50%, | |
| 371 | + 70%, | |
| 372 | + 90% { | |
| 373 | + -webkit-transform: translate3d(-10px, 0, 0); | |
| 374 | + transform: translate3d(-10px, 0, 0); | |
| 375 | + } | |
| 376 | + | |
| 377 | + 20%, | |
| 378 | + 40%, | |
| 379 | + 60%, | |
| 380 | + 80% { | |
| 381 | + -webkit-transform: translate3d(10px, 0, 0); | |
| 382 | + transform: translate3d(10px, 0, 0); | |
| 383 | + } | |
| 384 | +} | |
| 385 | +.animate__shakeX { | |
| 386 | + -webkit-animation-name: shakeX; | |
| 387 | + animation-name: shakeX; | |
| 388 | +} | |
| 389 | +@-webkit-keyframes shakeY { | |
| 390 | + from, | |
| 391 | + to { | |
| 392 | + -webkit-transform: translate3d(0, 0, 0); | |
| 393 | + transform: translate3d(0, 0, 0); | |
| 394 | + } | |
| 395 | + | |
| 396 | + 10%, | |
| 397 | + 30%, | |
| 398 | + 50%, | |
| 399 | + 70%, | |
| 400 | + 90% { | |
| 401 | + -webkit-transform: translate3d(0, -10px, 0); | |
| 402 | + transform: translate3d(0, -10px, 0); | |
| 403 | + } | |
| 404 | + | |
| 405 | + 20%, | |
| 406 | + 40%, | |
| 407 | + 60%, | |
| 408 | + 80% { | |
| 409 | + -webkit-transform: translate3d(0, 10px, 0); | |
| 410 | + transform: translate3d(0, 10px, 0); | |
| 411 | + } | |
| 412 | +} | |
| 413 | +@keyframes shakeY { | |
| 414 | + from, | |
| 415 | + to { | |
| 416 | + -webkit-transform: translate3d(0, 0, 0); | |
| 417 | + transform: translate3d(0, 0, 0); | |
| 418 | + } | |
| 419 | + | |
| 420 | + 10%, | |
| 421 | + 30%, | |
| 422 | + 50%, | |
| 423 | + 70%, | |
| 424 | + 90% { | |
| 425 | + -webkit-transform: translate3d(0, -10px, 0); | |
| 426 | + transform: translate3d(0, -10px, 0); | |
| 427 | + } | |
| 428 | + | |
| 429 | + 20%, | |
| 430 | + 40%, | |
| 431 | + 60%, | |
| 432 | + 80% { | |
| 433 | + -webkit-transform: translate3d(0, 10px, 0); | |
| 434 | + transform: translate3d(0, 10px, 0); | |
| 435 | + } | |
| 436 | +} | |
| 437 | +.animate__shakeY { | |
| 438 | + -webkit-animation-name: shakeY; | |
| 439 | + animation-name: shakeY; | |
| 440 | +} | |
| 441 | +@-webkit-keyframes headShake { | |
| 442 | + 0% { | |
| 443 | + -webkit-transform: translateX(0); | |
| 444 | + transform: translateX(0); | |
| 445 | + } | |
| 446 | + | |
| 447 | + 6.5% { | |
| 448 | + -webkit-transform: translateX(-6px) rotateY(-9deg); | |
| 449 | + transform: translateX(-6px) rotateY(-9deg); | |
| 450 | + } | |
| 451 | + | |
| 452 | + 18.5% { | |
| 453 | + -webkit-transform: translateX(5px) rotateY(7deg); | |
| 454 | + transform: translateX(5px) rotateY(7deg); | |
| 455 | + } | |
| 456 | + | |
| 457 | + 31.5% { | |
| 458 | + -webkit-transform: translateX(-3px) rotateY(-5deg); | |
| 459 | + transform: translateX(-3px) rotateY(-5deg); | |
| 460 | + } | |
| 461 | + | |
| 462 | + 43.5% { | |
| 463 | + -webkit-transform: translateX(2px) rotateY(3deg); | |
| 464 | + transform: translateX(2px) rotateY(3deg); | |
| 465 | + } | |
| 466 | + | |
| 467 | + 50% { | |
| 468 | + -webkit-transform: translateX(0); | |
| 469 | + transform: translateX(0); | |
| 470 | + } | |
| 471 | +} | |
| 472 | +@keyframes headShake { | |
| 473 | + 0% { | |
| 474 | + -webkit-transform: translateX(0); | |
| 475 | + transform: translateX(0); | |
| 476 | + } | |
| 477 | + | |
| 478 | + 6.5% { | |
| 479 | + -webkit-transform: translateX(-6px) rotateY(-9deg); | |
| 480 | + transform: translateX(-6px) rotateY(-9deg); | |
| 481 | + } | |
| 482 | + | |
| 483 | + 18.5% { | |
| 484 | + -webkit-transform: translateX(5px) rotateY(7deg); | |
| 485 | + transform: translateX(5px) rotateY(7deg); | |
| 486 | + } | |
| 487 | + | |
| 488 | + 31.5% { | |
| 489 | + -webkit-transform: translateX(-3px) rotateY(-5deg); | |
| 490 | + transform: translateX(-3px) rotateY(-5deg); | |
| 491 | + } | |
| 492 | + | |
| 493 | + 43.5% { | |
| 494 | + -webkit-transform: translateX(2px) rotateY(3deg); | |
| 495 | + transform: translateX(2px) rotateY(3deg); | |
| 496 | + } | |
| 497 | + | |
| 498 | + 50% { | |
| 499 | + -webkit-transform: translateX(0); | |
| 500 | + transform: translateX(0); | |
| 501 | + } | |
| 502 | +} | |
| 503 | +.animate__headShake { | |
| 504 | + -webkit-animation-timing-function: ease-in-out; | |
| 505 | + animation-timing-function: ease-in-out; | |
| 506 | + -webkit-animation-name: headShake; | |
| 507 | + animation-name: headShake; | |
| 508 | +} | |
| 509 | +@-webkit-keyframes swing { | |
| 510 | + 20% { | |
| 511 | + -webkit-transform: rotate3d(0, 0, 1, 15deg); | |
| 512 | + transform: rotate3d(0, 0, 1, 15deg); | |
| 513 | + } | |
| 514 | + | |
| 515 | + 40% { | |
| 516 | + -webkit-transform: rotate3d(0, 0, 1, -10deg); | |
| 517 | + transform: rotate3d(0, 0, 1, -10deg); | |
| 518 | + } | |
| 519 | + | |
| 520 | + 60% { | |
| 521 | + -webkit-transform: rotate3d(0, 0, 1, 5deg); | |
| 522 | + transform: rotate3d(0, 0, 1, 5deg); | |
| 523 | + } | |
| 524 | + | |
| 525 | + 80% { | |
| 526 | + -webkit-transform: rotate3d(0, 0, 1, -5deg); | |
| 527 | + transform: rotate3d(0, 0, 1, -5deg); | |
| 528 | + } | |
| 529 | + | |
| 530 | + to { | |
| 531 | + -webkit-transform: rotate3d(0, 0, 1, 0deg); | |
| 532 | + transform: rotate3d(0, 0, 1, 0deg); | |
| 533 | + } | |
| 534 | +} | |
| 535 | +@keyframes swing { | |
| 536 | + 20% { | |
| 537 | + -webkit-transform: rotate3d(0, 0, 1, 15deg); | |
| 538 | + transform: rotate3d(0, 0, 1, 15deg); | |
| 539 | + } | |
| 540 | + | |
| 541 | + 40% { | |
| 542 | + -webkit-transform: rotate3d(0, 0, 1, -10deg); | |
| 543 | + transform: rotate3d(0, 0, 1, -10deg); | |
| 544 | + } | |
| 545 | + | |
| 546 | + 60% { | |
| 547 | + -webkit-transform: rotate3d(0, 0, 1, 5deg); | |
| 548 | + transform: rotate3d(0, 0, 1, 5deg); | |
| 549 | + } | |
| 550 | + | |
| 551 | + 80% { | |
| 552 | + -webkit-transform: rotate3d(0, 0, 1, -5deg); | |
| 553 | + transform: rotate3d(0, 0, 1, -5deg); | |
| 554 | + } | |
| 555 | + | |
| 556 | + to { | |
| 557 | + -webkit-transform: rotate3d(0, 0, 1, 0deg); | |
| 558 | + transform: rotate3d(0, 0, 1, 0deg); | |
| 559 | + } | |
| 560 | +} | |
| 561 | +.animate__swing { | |
| 562 | + -webkit-transform-origin: top center; | |
| 563 | + transform-origin: top center; | |
| 564 | + -webkit-animation-name: swing; | |
| 565 | + animation-name: swing; | |
| 566 | +} | |
| 567 | +@-webkit-keyframes tada { | |
| 568 | + from { | |
| 569 | + -webkit-transform: scale3d(1, 1, 1); | |
| 570 | + transform: scale3d(1, 1, 1); | |
| 571 | + } | |
| 572 | + | |
| 573 | + 10%, | |
| 574 | + 20% { | |
| 575 | + -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); | |
| 576 | + transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); | |
| 577 | + } | |
| 578 | + | |
| 579 | + 30%, | |
| 580 | + 50%, | |
| 581 | + 70%, | |
| 582 | + 90% { | |
| 583 | + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
| 584 | + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
| 585 | + } | |
| 586 | + | |
| 587 | + 40%, | |
| 588 | + 60%, | |
| 589 | + 80% { | |
| 590 | + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
| 591 | + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
| 592 | + } | |
| 593 | + | |
| 594 | + to { | |
| 595 | + -webkit-transform: scale3d(1, 1, 1); | |
| 596 | + transform: scale3d(1, 1, 1); | |
| 597 | + } | |
| 598 | +} | |
| 599 | +@keyframes tada { | |
| 600 | + from { | |
| 601 | + -webkit-transform: scale3d(1, 1, 1); | |
| 602 | + transform: scale3d(1, 1, 1); | |
| 603 | + } | |
| 604 | + | |
| 605 | + 10%, | |
| 606 | + 20% { | |
| 607 | + -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); | |
| 608 | + transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); | |
| 609 | + } | |
| 610 | + | |
| 611 | + 30%, | |
| 612 | + 50%, | |
| 613 | + 70%, | |
| 614 | + 90% { | |
| 615 | + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
| 616 | + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
| 617 | + } | |
| 618 | + | |
| 619 | + 40%, | |
| 620 | + 60%, | |
| 621 | + 80% { | |
| 622 | + -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
| 623 | + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
| 624 | + } | |
| 625 | + | |
| 626 | + to { | |
| 627 | + -webkit-transform: scale3d(1, 1, 1); | |
| 628 | + transform: scale3d(1, 1, 1); | |
| 629 | + } | |
| 630 | +} | |
| 631 | +.animate__tada { | |
| 632 | + -webkit-animation-name: tada; | |
| 633 | + animation-name: tada; | |
| 634 | +} | |
| 635 | +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
| 636 | +@-webkit-keyframes wobble { | |
| 637 | + from { | |
| 638 | + -webkit-transform: translate3d(0, 0, 0); | |
| 639 | + transform: translate3d(0, 0, 0); | |
| 640 | + } | |
| 641 | + | |
| 642 | + 15% { | |
| 643 | + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
| 644 | + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
| 645 | + } | |
| 646 | + | |
| 647 | + 30% { | |
| 648 | + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
| 649 | + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
| 650 | + } | |
| 651 | + | |
| 652 | + 45% { | |
| 653 | + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
| 654 | + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
| 655 | + } | |
| 656 | + | |
| 657 | + 60% { | |
| 658 | + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
| 659 | + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
| 660 | + } | |
| 661 | + | |
| 662 | + 75% { | |
| 663 | + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
| 664 | + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
| 665 | + } | |
| 666 | + | |
| 667 | + to { | |
| 668 | + -webkit-transform: translate3d(0, 0, 0); | |
| 669 | + transform: translate3d(0, 0, 0); | |
| 670 | + } | |
| 671 | +} | |
| 672 | +@keyframes wobble { | |
| 673 | + from { | |
| 674 | + -webkit-transform: translate3d(0, 0, 0); | |
| 675 | + transform: translate3d(0, 0, 0); | |
| 676 | + } | |
| 677 | + | |
| 678 | + 15% { | |
| 679 | + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
| 680 | + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
| 681 | + } | |
| 682 | + | |
| 683 | + 30% { | |
| 684 | + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
| 685 | + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
| 686 | + } | |
| 687 | + | |
| 688 | + 45% { | |
| 689 | + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
| 690 | + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
| 691 | + } | |
| 692 | + | |
| 693 | + 60% { | |
| 694 | + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
| 695 | + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
| 696 | + } | |
| 697 | + | |
| 698 | + 75% { | |
| 699 | + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
| 700 | + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
| 701 | + } | |
| 702 | + | |
| 703 | + to { | |
| 704 | + -webkit-transform: translate3d(0, 0, 0); | |
| 705 | + transform: translate3d(0, 0, 0); | |
| 706 | + } | |
| 707 | +} | |
| 708 | +.animate__wobble { | |
| 709 | + -webkit-animation-name: wobble; | |
| 710 | + animation-name: wobble; | |
| 711 | +} | |
| 712 | +@-webkit-keyframes jello { | |
| 713 | + from, | |
| 714 | + 11.1%, | |
| 715 | + to { | |
| 716 | + -webkit-transform: translate3d(0, 0, 0); | |
| 717 | + transform: translate3d(0, 0, 0); | |
| 718 | + } | |
| 719 | + | |
| 720 | + 22.2% { | |
| 721 | + -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); | |
| 722 | + transform: skewX(-12.5deg) skewY(-12.5deg); | |
| 723 | + } | |
| 724 | + | |
| 725 | + 33.3% { | |
| 726 | + -webkit-transform: skewX(6.25deg) skewY(6.25deg); | |
| 727 | + transform: skewX(6.25deg) skewY(6.25deg); | |
| 728 | + } | |
| 729 | + | |
| 730 | + 44.4% { | |
| 731 | + -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); | |
| 732 | + transform: skewX(-3.125deg) skewY(-3.125deg); | |
| 733 | + } | |
| 734 | + | |
| 735 | + 55.5% { | |
| 736 | + -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); | |
| 737 | + transform: skewX(1.5625deg) skewY(1.5625deg); | |
| 738 | + } | |
| 739 | + | |
| 740 | + 66.6% { | |
| 741 | + -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
| 742 | + transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
| 743 | + } | |
| 744 | + | |
| 745 | + 77.7% { | |
| 746 | + -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); | |
| 747 | + transform: skewX(0.390625deg) skewY(0.390625deg); | |
| 748 | + } | |
| 749 | + | |
| 750 | + 88.8% { | |
| 751 | + -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
| 752 | + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
| 753 | + } | |
| 754 | +} | |
| 755 | +@keyframes jello { | |
| 756 | + from, | |
| 757 | + 11.1%, | |
| 758 | + to { | |
| 759 | + -webkit-transform: translate3d(0, 0, 0); | |
| 760 | + transform: translate3d(0, 0, 0); | |
| 761 | + } | |
| 762 | + | |
| 763 | + 22.2% { | |
| 764 | + -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); | |
| 765 | + transform: skewX(-12.5deg) skewY(-12.5deg); | |
| 766 | + } | |
| 767 | + | |
| 768 | + 33.3% { | |
| 769 | + -webkit-transform: skewX(6.25deg) skewY(6.25deg); | |
| 770 | + transform: skewX(6.25deg) skewY(6.25deg); | |
| 771 | + } | |
| 772 | + | |
| 773 | + 44.4% { | |
| 774 | + -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); | |
| 775 | + transform: skewX(-3.125deg) skewY(-3.125deg); | |
| 776 | + } | |
| 777 | + | |
| 778 | + 55.5% { | |
| 779 | + -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); | |
| 780 | + transform: skewX(1.5625deg) skewY(1.5625deg); | |
| 781 | + } | |
| 782 | + | |
| 783 | + 66.6% { | |
| 784 | + -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
| 785 | + transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
| 786 | + } | |
| 787 | + | |
| 788 | + 77.7% { | |
| 789 | + -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); | |
| 790 | + transform: skewX(0.390625deg) skewY(0.390625deg); | |
| 791 | + } | |
| 792 | + | |
| 793 | + 88.8% { | |
| 794 | + -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
| 795 | + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
| 796 | + } | |
| 797 | +} | |
| 798 | +.animate__jello { | |
| 799 | + -webkit-animation-name: jello; | |
| 800 | + animation-name: jello; | |
| 801 | + -webkit-transform-origin: center; | |
| 802 | + transform-origin: center; | |
| 803 | +} | |
| 804 | +@-webkit-keyframes heartBeat { | |
| 805 | + 0% { | |
| 806 | + -webkit-transform: scale(1); | |
| 807 | + transform: scale(1); | |
| 808 | + } | |
| 809 | + | |
| 810 | + 14% { | |
| 811 | + -webkit-transform: scale(1.3); | |
| 812 | + transform: scale(1.3); | |
| 813 | + } | |
| 814 | + | |
| 815 | + 28% { | |
| 816 | + -webkit-transform: scale(1); | |
| 817 | + transform: scale(1); | |
| 818 | + } | |
| 819 | + | |
| 820 | + 42% { | |
| 821 | + -webkit-transform: scale(1.3); | |
| 822 | + transform: scale(1.3); | |
| 823 | + } | |
| 824 | + | |
| 825 | + 70% { | |
| 826 | + -webkit-transform: scale(1); | |
| 827 | + transform: scale(1); | |
| 828 | + } | |
| 829 | +} | |
| 830 | +@keyframes heartBeat { | |
| 831 | + 0% { | |
| 832 | + -webkit-transform: scale(1); | |
| 833 | + transform: scale(1); | |
| 834 | + } | |
| 835 | + | |
| 836 | + 14% { | |
| 837 | + -webkit-transform: scale(1.3); | |
| 838 | + transform: scale(1.3); | |
| 839 | + } | |
| 840 | + | |
| 841 | + 28% { | |
| 842 | + -webkit-transform: scale(1); | |
| 843 | + transform: scale(1); | |
| 844 | + } | |
| 845 | + | |
| 846 | + 42% { | |
| 847 | + -webkit-transform: scale(1.3); | |
| 848 | + transform: scale(1.3); | |
| 849 | + } | |
| 850 | + | |
| 851 | + 70% { | |
| 852 | + -webkit-transform: scale(1); | |
| 853 | + transform: scale(1); | |
| 854 | + } | |
| 855 | +} | |
| 856 | +.animate__heartBeat { | |
| 857 | + -webkit-animation-name: heartBeat; | |
| 858 | + animation-name: heartBeat; | |
| 859 | + -webkit-animation-duration: calc(1s * 1.3); | |
| 860 | + animation-duration: calc(1s * 1.3); | |
| 861 | + -webkit-animation-duration: calc(var(--animate-duration) * 1.3); | |
| 862 | + animation-duration: calc(var(--animate-duration) * 1.3); | |
| 863 | + -webkit-animation-timing-function: ease-in-out; | |
| 864 | + animation-timing-function: ease-in-out; | |
| 865 | +} | |
| 866 | +/* Back entrances */ | |
| 867 | +@-webkit-keyframes backInDown { | |
| 868 | + 0% { | |
| 869 | + -webkit-transform: translateY(-1200px) scale(0.7); | |
| 870 | + transform: translateY(-1200px) scale(0.7); | |
| 871 | + opacity: 0.7; | |
| 872 | + } | |
| 873 | + | |
| 874 | + 80% { | |
| 875 | + -webkit-transform: translateY(0px) scale(0.7); | |
| 876 | + transform: translateY(0px) scale(0.7); | |
| 877 | + opacity: 0.7; | |
| 878 | + } | |
| 879 | + | |
| 880 | + 100% { | |
| 881 | + -webkit-transform: scale(1); | |
| 882 | + transform: scale(1); | |
| 883 | + opacity: 1; | |
| 884 | + } | |
| 885 | +} | |
| 886 | +@keyframes backInDown { | |
| 887 | + 0% { | |
| 888 | + -webkit-transform: translateY(-1200px) scale(0.7); | |
| 889 | + transform: translateY(-1200px) scale(0.7); | |
| 890 | + opacity: 0.7; | |
| 891 | + } | |
| 892 | + | |
| 893 | + 80% { | |
| 894 | + -webkit-transform: translateY(0px) scale(0.7); | |
| 895 | + transform: translateY(0px) scale(0.7); | |
| 896 | + opacity: 0.7; | |
| 897 | + } | |
| 898 | + | |
| 899 | + 100% { | |
| 900 | + -webkit-transform: scale(1); | |
| 901 | + transform: scale(1); | |
| 902 | + opacity: 1; | |
| 903 | + } | |
| 904 | +} | |
| 905 | +.animate__backInDown { | |
| 906 | + -webkit-animation-name: backInDown; | |
| 907 | + animation-name: backInDown; | |
| 908 | +} | |
| 909 | +@-webkit-keyframes backInLeft { | |
| 910 | + 0% { | |
| 911 | + -webkit-transform: translateX(-2000px) scale(0.7); | |
| 912 | + transform: translateX(-2000px) scale(0.7); | |
| 913 | + opacity: 0.7; | |
| 914 | + } | |
| 915 | + | |
| 916 | + 80% { | |
| 917 | + -webkit-transform: translateX(0px) scale(0.7); | |
| 918 | + transform: translateX(0px) scale(0.7); | |
| 919 | + opacity: 0.7; | |
| 920 | + } | |
| 921 | + | |
| 922 | + 100% { | |
| 923 | + -webkit-transform: scale(1); | |
| 924 | + transform: scale(1); | |
| 925 | + opacity: 1; | |
| 926 | + } | |
| 927 | +} | |
| 928 | +@keyframes backInLeft { | |
| 929 | + 0% { | |
| 930 | + -webkit-transform: translateX(-2000px) scale(0.7); | |
| 931 | + transform: translateX(-2000px) scale(0.7); | |
| 932 | + opacity: 0.7; | |
| 933 | + } | |
| 934 | + | |
| 935 | + 80% { | |
| 936 | + -webkit-transform: translateX(0px) scale(0.7); | |
| 937 | + transform: translateX(0px) scale(0.7); | |
| 938 | + opacity: 0.7; | |
| 939 | + } | |
| 940 | + | |
| 941 | + 100% { | |
| 942 | + -webkit-transform: scale(1); | |
| 943 | + transform: scale(1); | |
| 944 | + opacity: 1; | |
| 945 | + } | |
| 946 | +} | |
| 947 | +.animate__backInLeft { | |
| 948 | + -webkit-animation-name: backInLeft; | |
| 949 | + animation-name: backInLeft; | |
| 950 | +} | |
| 951 | +@-webkit-keyframes backInRight { | |
| 952 | + 0% { | |
| 953 | + -webkit-transform: translateX(2000px) scale(0.7); | |
| 954 | + transform: translateX(2000px) scale(0.7); | |
| 955 | + opacity: 0.7; | |
| 956 | + } | |
| 957 | + | |
| 958 | + 80% { | |
| 959 | + -webkit-transform: translateX(0px) scale(0.7); | |
| 960 | + transform: translateX(0px) scale(0.7); | |
| 961 | + opacity: 0.7; | |
| 962 | + } | |
| 963 | + | |
| 964 | + 100% { | |
| 965 | + -webkit-transform: scale(1); | |
| 966 | + transform: scale(1); | |
| 967 | + opacity: 1; | |
| 968 | + } | |
| 969 | +} | |
| 970 | +@keyframes backInRight { | |
| 971 | + 0% { | |
| 972 | + -webkit-transform: translateX(2000px) scale(0.7); | |
| 973 | + transform: translateX(2000px) scale(0.7); | |
| 974 | + opacity: 0.7; | |
| 975 | + } | |
| 976 | + | |
| 977 | + 80% { | |
| 978 | + -webkit-transform: translateX(0px) scale(0.7); | |
| 979 | + transform: translateX(0px) scale(0.7); | |
| 980 | + opacity: 0.7; | |
| 981 | + } | |
| 982 | + | |
| 983 | + 100% { | |
| 984 | + -webkit-transform: scale(1); | |
| 985 | + transform: scale(1); | |
| 986 | + opacity: 1; | |
| 987 | + } | |
| 988 | +} | |
| 989 | +.animate__backInRight { | |
| 990 | + -webkit-animation-name: backInRight; | |
| 991 | + animation-name: backInRight; | |
| 992 | +} | |
| 993 | +@-webkit-keyframes backInUp { | |
| 994 | + 0% { | |
| 995 | + -webkit-transform: translateY(1200px) scale(0.7); | |
| 996 | + transform: translateY(1200px) scale(0.7); | |
| 997 | + opacity: 0.7; | |
| 998 | + } | |
| 999 | + | |
| 1000 | + 80% { | |
| 1001 | + -webkit-transform: translateY(0px) scale(0.7); | |
| 1002 | + transform: translateY(0px) scale(0.7); | |
| 1003 | + opacity: 0.7; | |
| 1004 | + } | |
| 1005 | + | |
| 1006 | + 100% { | |
| 1007 | + -webkit-transform: scale(1); | |
| 1008 | + transform: scale(1); | |
| 1009 | + opacity: 1; | |
| 1010 | + } | |
| 1011 | +} | |
| 1012 | +@keyframes backInUp { | |
| 1013 | + 0% { | |
| 1014 | + -webkit-transform: translateY(1200px) scale(0.7); | |
| 1015 | + transform: translateY(1200px) scale(0.7); | |
| 1016 | + opacity: 0.7; | |
| 1017 | + } | |
| 1018 | + | |
| 1019 | + 80% { | |
| 1020 | + -webkit-transform: translateY(0px) scale(0.7); | |
| 1021 | + transform: translateY(0px) scale(0.7); | |
| 1022 | + opacity: 0.7; | |
| 1023 | + } | |
| 1024 | + | |
| 1025 | + 100% { | |
| 1026 | + -webkit-transform: scale(1); | |
| 1027 | + transform: scale(1); | |
| 1028 | + opacity: 1; | |
| 1029 | + } | |
| 1030 | +} | |
| 1031 | +.animate__backInUp { | |
| 1032 | + -webkit-animation-name: backInUp; | |
| 1033 | + animation-name: backInUp; | |
| 1034 | +} | |
| 1035 | +/* Back exits */ | |
| 1036 | +@-webkit-keyframes backOutDown { | |
| 1037 | + 0% { | |
| 1038 | + -webkit-transform: scale(1); | |
| 1039 | + transform: scale(1); | |
| 1040 | + opacity: 1; | |
| 1041 | + } | |
| 1042 | + | |
| 1043 | + 20% { | |
| 1044 | + -webkit-transform: translateY(0px) scale(0.7); | |
| 1045 | + transform: translateY(0px) scale(0.7); | |
| 1046 | + opacity: 0.7; | |
| 1047 | + } | |
| 1048 | + | |
| 1049 | + 100% { | |
| 1050 | + -webkit-transform: translateY(700px) scale(0.7); | |
| 1051 | + transform: translateY(700px) scale(0.7); | |
| 1052 | + opacity: 0.7; | |
| 1053 | + } | |
| 1054 | +} | |
| 1055 | +@keyframes backOutDown { | |
| 1056 | + 0% { | |
| 1057 | + -webkit-transform: scale(1); | |
| 1058 | + transform: scale(1); | |
| 1059 | + opacity: 1; | |
| 1060 | + } | |
| 1061 | + | |
| 1062 | + 20% { | |
| 1063 | + -webkit-transform: translateY(0px) scale(0.7); | |
| 1064 | + transform: translateY(0px) scale(0.7); | |
| 1065 | + opacity: 0.7; | |
| 1066 | + } | |
| 1067 | + | |
| 1068 | + 100% { | |
| 1069 | + -webkit-transform: translateY(700px) scale(0.7); | |
| 1070 | + transform: translateY(700px) scale(0.7); | |
| 1071 | + opacity: 0.7; | |
| 1072 | + } | |
| 1073 | +} | |
| 1074 | +.animate__backOutDown { | |
| 1075 | + -webkit-animation-name: backOutDown; | |
| 1076 | + animation-name: backOutDown; | |
| 1077 | +} | |
| 1078 | +@-webkit-keyframes backOutLeft { | |
| 1079 | + 0% { | |
| 1080 | + -webkit-transform: scale(1); | |
| 1081 | + transform: scale(1); | |
| 1082 | + opacity: 1; | |
| 1083 | + } | |
| 1084 | + | |
| 1085 | + 20% { | |
| 1086 | + -webkit-transform: translateX(0px) scale(0.7); | |
| 1087 | + transform: translateX(0px) scale(0.7); | |
| 1088 | + opacity: 0.7; | |
| 1089 | + } | |
| 1090 | + | |
| 1091 | + 100% { | |
| 1092 | + -webkit-transform: translateX(-2000px) scale(0.7); | |
| 1093 | + transform: translateX(-2000px) scale(0.7); | |
| 1094 | + opacity: 0.7; | |
| 1095 | + } | |
| 1096 | +} | |
| 1097 | +@keyframes backOutLeft { | |
| 1098 | + 0% { | |
| 1099 | + -webkit-transform: scale(1); | |
| 1100 | + transform: scale(1); | |
| 1101 | + opacity: 1; | |
| 1102 | + } | |
| 1103 | + | |
| 1104 | + 20% { | |
| 1105 | + -webkit-transform: translateX(0px) scale(0.7); | |
| 1106 | + transform: translateX(0px) scale(0.7); | |
| 1107 | + opacity: 0.7; | |
| 1108 | + } | |
| 1109 | + | |
| 1110 | + 100% { | |
| 1111 | + -webkit-transform: translateX(-2000px) scale(0.7); | |
| 1112 | + transform: translateX(-2000px) scale(0.7); | |
| 1113 | + opacity: 0.7; | |
| 1114 | + } | |
| 1115 | +} | |
| 1116 | +.animate__backOutLeft { | |
| 1117 | + -webkit-animation-name: backOutLeft; | |
| 1118 | + animation-name: backOutLeft; | |
| 1119 | +} | |
| 1120 | +@-webkit-keyframes backOutRight { | |
| 1121 | + 0% { | |
| 1122 | + -webkit-transform: scale(1); | |
| 1123 | + transform: scale(1); | |
| 1124 | + opacity: 1; | |
| 1125 | + } | |
| 1126 | + | |
| 1127 | + 20% { | |
| 1128 | + -webkit-transform: translateX(0px) scale(0.7); | |
| 1129 | + transform: translateX(0px) scale(0.7); | |
| 1130 | + opacity: 0.7; | |
| 1131 | + } | |
| 1132 | + | |
| 1133 | + 100% { | |
| 1134 | + -webkit-transform: translateX(2000px) scale(0.7); | |
| 1135 | + transform: translateX(2000px) scale(0.7); | |
| 1136 | + opacity: 0.7; | |
| 1137 | + } | |
| 1138 | +} | |
| 1139 | +@keyframes backOutRight { | |
| 1140 | + 0% { | |
| 1141 | + -webkit-transform: scale(1); | |
| 1142 | + transform: scale(1); | |
| 1143 | + opacity: 1; | |
| 1144 | + } | |
| 1145 | + | |
| 1146 | + 20% { | |
| 1147 | + -webkit-transform: translateX(0px) scale(0.7); | |
| 1148 | + transform: translateX(0px) scale(0.7); | |
| 1149 | + opacity: 0.7; | |
| 1150 | + } | |
| 1151 | + | |
| 1152 | + 100% { | |
| 1153 | + -webkit-transform: translateX(2000px) scale(0.7); | |
| 1154 | + transform: translateX(2000px) scale(0.7); | |
| 1155 | + opacity: 0.7; | |
| 1156 | + } | |
| 1157 | +} | |
| 1158 | +.animate__backOutRight { | |
| 1159 | + -webkit-animation-name: backOutRight; | |
| 1160 | + animation-name: backOutRight; | |
| 1161 | +} | |
| 1162 | +@-webkit-keyframes backOutUp { | |
| 1163 | + 0% { | |
| 1164 | + -webkit-transform: scale(1); | |
| 1165 | + transform: scale(1); | |
| 1166 | + opacity: 1; | |
| 1167 | + } | |
| 1168 | + | |
| 1169 | + 20% { | |
| 1170 | + -webkit-transform: translateY(0px) scale(0.7); | |
| 1171 | + transform: translateY(0px) scale(0.7); | |
| 1172 | + opacity: 0.7; | |
| 1173 | + } | |
| 1174 | + | |
| 1175 | + 100% { | |
| 1176 | + -webkit-transform: translateY(-700px) scale(0.7); | |
| 1177 | + transform: translateY(-700px) scale(0.7); | |
| 1178 | + opacity: 0.7; | |
| 1179 | + } | |
| 1180 | +} | |
| 1181 | +@keyframes backOutUp { | |
| 1182 | + 0% { | |
| 1183 | + -webkit-transform: scale(1); | |
| 1184 | + transform: scale(1); | |
| 1185 | + opacity: 1; | |
| 1186 | + } | |
| 1187 | + | |
| 1188 | + 20% { | |
| 1189 | + -webkit-transform: translateY(0px) scale(0.7); | |
| 1190 | + transform: translateY(0px) scale(0.7); | |
| 1191 | + opacity: 0.7; | |
| 1192 | + } | |
| 1193 | + | |
| 1194 | + 100% { | |
| 1195 | + -webkit-transform: translateY(-700px) scale(0.7); | |
| 1196 | + transform: translateY(-700px) scale(0.7); | |
| 1197 | + opacity: 0.7; | |
| 1198 | + } | |
| 1199 | +} | |
| 1200 | +.animate__backOutUp { | |
| 1201 | + -webkit-animation-name: backOutUp; | |
| 1202 | + animation-name: backOutUp; | |
| 1203 | +} | |
| 1204 | +/* Bouncing entrances */ | |
| 1205 | +@-webkit-keyframes bounceIn { | |
| 1206 | + from, | |
| 1207 | + 20%, | |
| 1208 | + 40%, | |
| 1209 | + 60%, | |
| 1210 | + 80%, | |
| 1211 | + to { | |
| 1212 | + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1213 | + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1214 | + } | |
| 1215 | + | |
| 1216 | + 0% { | |
| 1217 | + opacity: 0; | |
| 1218 | + -webkit-transform: scale3d(0.3, 0.3, 0.3); | |
| 1219 | + transform: scale3d(0.3, 0.3, 0.3); | |
| 1220 | + } | |
| 1221 | + | |
| 1222 | + 20% { | |
| 1223 | + -webkit-transform: scale3d(1.1, 1.1, 1.1); | |
| 1224 | + transform: scale3d(1.1, 1.1, 1.1); | |
| 1225 | + } | |
| 1226 | + | |
| 1227 | + 40% { | |
| 1228 | + -webkit-transform: scale3d(0.9, 0.9, 0.9); | |
| 1229 | + transform: scale3d(0.9, 0.9, 0.9); | |
| 1230 | + } | |
| 1231 | + | |
| 1232 | + 60% { | |
| 1233 | + opacity: 1; | |
| 1234 | + -webkit-transform: scale3d(1.03, 1.03, 1.03); | |
| 1235 | + transform: scale3d(1.03, 1.03, 1.03); | |
| 1236 | + } | |
| 1237 | + | |
| 1238 | + 80% { | |
| 1239 | + -webkit-transform: scale3d(0.97, 0.97, 0.97); | |
| 1240 | + transform: scale3d(0.97, 0.97, 0.97); | |
| 1241 | + } | |
| 1242 | + | |
| 1243 | + to { | |
| 1244 | + opacity: 1; | |
| 1245 | + -webkit-transform: scale3d(1, 1, 1); | |
| 1246 | + transform: scale3d(1, 1, 1); | |
| 1247 | + } | |
| 1248 | +} | |
| 1249 | +@keyframes bounceIn { | |
| 1250 | + from, | |
| 1251 | + 20%, | |
| 1252 | + 40%, | |
| 1253 | + 60%, | |
| 1254 | + 80%, | |
| 1255 | + to { | |
| 1256 | + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1257 | + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1258 | + } | |
| 1259 | + | |
| 1260 | + 0% { | |
| 1261 | + opacity: 0; | |
| 1262 | + -webkit-transform: scale3d(0.3, 0.3, 0.3); | |
| 1263 | + transform: scale3d(0.3, 0.3, 0.3); | |
| 1264 | + } | |
| 1265 | + | |
| 1266 | + 20% { | |
| 1267 | + -webkit-transform: scale3d(1.1, 1.1, 1.1); | |
| 1268 | + transform: scale3d(1.1, 1.1, 1.1); | |
| 1269 | + } | |
| 1270 | + | |
| 1271 | + 40% { | |
| 1272 | + -webkit-transform: scale3d(0.9, 0.9, 0.9); | |
| 1273 | + transform: scale3d(0.9, 0.9, 0.9); | |
| 1274 | + } | |
| 1275 | + | |
| 1276 | + 60% { | |
| 1277 | + opacity: 1; | |
| 1278 | + -webkit-transform: scale3d(1.03, 1.03, 1.03); | |
| 1279 | + transform: scale3d(1.03, 1.03, 1.03); | |
| 1280 | + } | |
| 1281 | + | |
| 1282 | + 80% { | |
| 1283 | + -webkit-transform: scale3d(0.97, 0.97, 0.97); | |
| 1284 | + transform: scale3d(0.97, 0.97, 0.97); | |
| 1285 | + } | |
| 1286 | + | |
| 1287 | + to { | |
| 1288 | + opacity: 1; | |
| 1289 | + -webkit-transform: scale3d(1, 1, 1); | |
| 1290 | + transform: scale3d(1, 1, 1); | |
| 1291 | + } | |
| 1292 | +} | |
| 1293 | +.animate__bounceIn { | |
| 1294 | + -webkit-animation-duration: calc(1s * 0.75); | |
| 1295 | + animation-duration: calc(1s * 0.75); | |
| 1296 | + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); | |
| 1297 | + animation-duration: calc(var(--animate-duration) * 0.75); | |
| 1298 | + -webkit-animation-name: bounceIn; | |
| 1299 | + animation-name: bounceIn; | |
| 1300 | +} | |
| 1301 | +@-webkit-keyframes bounceInDown { | |
| 1302 | + from, | |
| 1303 | + 60%, | |
| 1304 | + 75%, | |
| 1305 | + 90%, | |
| 1306 | + to { | |
| 1307 | + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1308 | + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1309 | + } | |
| 1310 | + | |
| 1311 | + 0% { | |
| 1312 | + opacity: 0; | |
| 1313 | + -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); | |
| 1314 | + transform: translate3d(0, -3000px, 0) scaleY(3); | |
| 1315 | + } | |
| 1316 | + | |
| 1317 | + 60% { | |
| 1318 | + opacity: 1; | |
| 1319 | + -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); | |
| 1320 | + transform: translate3d(0, 25px, 0) scaleY(0.9); | |
| 1321 | + } | |
| 1322 | + | |
| 1323 | + 75% { | |
| 1324 | + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); | |
| 1325 | + transform: translate3d(0, -10px, 0) scaleY(0.95); | |
| 1326 | + } | |
| 1327 | + | |
| 1328 | + 90% { | |
| 1329 | + -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); | |
| 1330 | + transform: translate3d(0, 5px, 0) scaleY(0.985); | |
| 1331 | + } | |
| 1332 | + | |
| 1333 | + to { | |
| 1334 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1335 | + transform: translate3d(0, 0, 0); | |
| 1336 | + } | |
| 1337 | +} | |
| 1338 | +@keyframes bounceInDown { | |
| 1339 | + from, | |
| 1340 | + 60%, | |
| 1341 | + 75%, | |
| 1342 | + 90%, | |
| 1343 | + to { | |
| 1344 | + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1345 | + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1346 | + } | |
| 1347 | + | |
| 1348 | + 0% { | |
| 1349 | + opacity: 0; | |
| 1350 | + -webkit-transform: translate3d(0, -3000px, 0) scaleY(3); | |
| 1351 | + transform: translate3d(0, -3000px, 0) scaleY(3); | |
| 1352 | + } | |
| 1353 | + | |
| 1354 | + 60% { | |
| 1355 | + opacity: 1; | |
| 1356 | + -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9); | |
| 1357 | + transform: translate3d(0, 25px, 0) scaleY(0.9); | |
| 1358 | + } | |
| 1359 | + | |
| 1360 | + 75% { | |
| 1361 | + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95); | |
| 1362 | + transform: translate3d(0, -10px, 0) scaleY(0.95); | |
| 1363 | + } | |
| 1364 | + | |
| 1365 | + 90% { | |
| 1366 | + -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985); | |
| 1367 | + transform: translate3d(0, 5px, 0) scaleY(0.985); | |
| 1368 | + } | |
| 1369 | + | |
| 1370 | + to { | |
| 1371 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1372 | + transform: translate3d(0, 0, 0); | |
| 1373 | + } | |
| 1374 | +} | |
| 1375 | +.animate__bounceInDown { | |
| 1376 | + -webkit-animation-name: bounceInDown; | |
| 1377 | + animation-name: bounceInDown; | |
| 1378 | +} | |
| 1379 | +@-webkit-keyframes bounceInLeft { | |
| 1380 | + from, | |
| 1381 | + 60%, | |
| 1382 | + 75%, | |
| 1383 | + 90%, | |
| 1384 | + to { | |
| 1385 | + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1386 | + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1387 | + } | |
| 1388 | + | |
| 1389 | + 0% { | |
| 1390 | + opacity: 0; | |
| 1391 | + -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); | |
| 1392 | + transform: translate3d(-3000px, 0, 0) scaleX(3); | |
| 1393 | + } | |
| 1394 | + | |
| 1395 | + 60% { | |
| 1396 | + opacity: 1; | |
| 1397 | + -webkit-transform: translate3d(25px, 0, 0) scaleX(1); | |
| 1398 | + transform: translate3d(25px, 0, 0) scaleX(1); | |
| 1399 | + } | |
| 1400 | + | |
| 1401 | + 75% { | |
| 1402 | + -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); | |
| 1403 | + transform: translate3d(-10px, 0, 0) scaleX(0.98); | |
| 1404 | + } | |
| 1405 | + | |
| 1406 | + 90% { | |
| 1407 | + -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); | |
| 1408 | + transform: translate3d(5px, 0, 0) scaleX(0.995); | |
| 1409 | + } | |
| 1410 | + | |
| 1411 | + to { | |
| 1412 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1413 | + transform: translate3d(0, 0, 0); | |
| 1414 | + } | |
| 1415 | +} | |
| 1416 | +@keyframes bounceInLeft { | |
| 1417 | + from, | |
| 1418 | + 60%, | |
| 1419 | + 75%, | |
| 1420 | + 90%, | |
| 1421 | + to { | |
| 1422 | + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1423 | + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1424 | + } | |
| 1425 | + | |
| 1426 | + 0% { | |
| 1427 | + opacity: 0; | |
| 1428 | + -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3); | |
| 1429 | + transform: translate3d(-3000px, 0, 0) scaleX(3); | |
| 1430 | + } | |
| 1431 | + | |
| 1432 | + 60% { | |
| 1433 | + opacity: 1; | |
| 1434 | + -webkit-transform: translate3d(25px, 0, 0) scaleX(1); | |
| 1435 | + transform: translate3d(25px, 0, 0) scaleX(1); | |
| 1436 | + } | |
| 1437 | + | |
| 1438 | + 75% { | |
| 1439 | + -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98); | |
| 1440 | + transform: translate3d(-10px, 0, 0) scaleX(0.98); | |
| 1441 | + } | |
| 1442 | + | |
| 1443 | + 90% { | |
| 1444 | + -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995); | |
| 1445 | + transform: translate3d(5px, 0, 0) scaleX(0.995); | |
| 1446 | + } | |
| 1447 | + | |
| 1448 | + to { | |
| 1449 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1450 | + transform: translate3d(0, 0, 0); | |
| 1451 | + } | |
| 1452 | +} | |
| 1453 | +.animate__bounceInLeft { | |
| 1454 | + -webkit-animation-name: bounceInLeft; | |
| 1455 | + animation-name: bounceInLeft; | |
| 1456 | +} | |
| 1457 | +@-webkit-keyframes bounceInRight { | |
| 1458 | + from, | |
| 1459 | + 60%, | |
| 1460 | + 75%, | |
| 1461 | + 90%, | |
| 1462 | + to { | |
| 1463 | + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1464 | + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1465 | + } | |
| 1466 | + | |
| 1467 | + from { | |
| 1468 | + opacity: 0; | |
| 1469 | + -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); | |
| 1470 | + transform: translate3d(3000px, 0, 0) scaleX(3); | |
| 1471 | + } | |
| 1472 | + | |
| 1473 | + 60% { | |
| 1474 | + opacity: 1; | |
| 1475 | + -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); | |
| 1476 | + transform: translate3d(-25px, 0, 0) scaleX(1); | |
| 1477 | + } | |
| 1478 | + | |
| 1479 | + 75% { | |
| 1480 | + -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); | |
| 1481 | + transform: translate3d(10px, 0, 0) scaleX(0.98); | |
| 1482 | + } | |
| 1483 | + | |
| 1484 | + 90% { | |
| 1485 | + -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); | |
| 1486 | + transform: translate3d(-5px, 0, 0) scaleX(0.995); | |
| 1487 | + } | |
| 1488 | + | |
| 1489 | + to { | |
| 1490 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1491 | + transform: translate3d(0, 0, 0); | |
| 1492 | + } | |
| 1493 | +} | |
| 1494 | +@keyframes bounceInRight { | |
| 1495 | + from, | |
| 1496 | + 60%, | |
| 1497 | + 75%, | |
| 1498 | + 90%, | |
| 1499 | + to { | |
| 1500 | + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1501 | + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1502 | + } | |
| 1503 | + | |
| 1504 | + from { | |
| 1505 | + opacity: 0; | |
| 1506 | + -webkit-transform: translate3d(3000px, 0, 0) scaleX(3); | |
| 1507 | + transform: translate3d(3000px, 0, 0) scaleX(3); | |
| 1508 | + } | |
| 1509 | + | |
| 1510 | + 60% { | |
| 1511 | + opacity: 1; | |
| 1512 | + -webkit-transform: translate3d(-25px, 0, 0) scaleX(1); | |
| 1513 | + transform: translate3d(-25px, 0, 0) scaleX(1); | |
| 1514 | + } | |
| 1515 | + | |
| 1516 | + 75% { | |
| 1517 | + -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98); | |
| 1518 | + transform: translate3d(10px, 0, 0) scaleX(0.98); | |
| 1519 | + } | |
| 1520 | + | |
| 1521 | + 90% { | |
| 1522 | + -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995); | |
| 1523 | + transform: translate3d(-5px, 0, 0) scaleX(0.995); | |
| 1524 | + } | |
| 1525 | + | |
| 1526 | + to { | |
| 1527 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1528 | + transform: translate3d(0, 0, 0); | |
| 1529 | + } | |
| 1530 | +} | |
| 1531 | +.animate__bounceInRight { | |
| 1532 | + -webkit-animation-name: bounceInRight; | |
| 1533 | + animation-name: bounceInRight; | |
| 1534 | +} | |
| 1535 | +@-webkit-keyframes bounceInUp { | |
| 1536 | + from, | |
| 1537 | + 60%, | |
| 1538 | + 75%, | |
| 1539 | + 90%, | |
| 1540 | + to { | |
| 1541 | + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1542 | + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1543 | + } | |
| 1544 | + | |
| 1545 | + from { | |
| 1546 | + opacity: 0; | |
| 1547 | + -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); | |
| 1548 | + transform: translate3d(0, 3000px, 0) scaleY(5); | |
| 1549 | + } | |
| 1550 | + | |
| 1551 | + 60% { | |
| 1552 | + opacity: 1; | |
| 1553 | + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); | |
| 1554 | + transform: translate3d(0, -20px, 0) scaleY(0.9); | |
| 1555 | + } | |
| 1556 | + | |
| 1557 | + 75% { | |
| 1558 | + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); | |
| 1559 | + transform: translate3d(0, 10px, 0) scaleY(0.95); | |
| 1560 | + } | |
| 1561 | + | |
| 1562 | + 90% { | |
| 1563 | + -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); | |
| 1564 | + transform: translate3d(0, -5px, 0) scaleY(0.985); | |
| 1565 | + } | |
| 1566 | + | |
| 1567 | + to { | |
| 1568 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1569 | + transform: translate3d(0, 0, 0); | |
| 1570 | + } | |
| 1571 | +} | |
| 1572 | +@keyframes bounceInUp { | |
| 1573 | + from, | |
| 1574 | + 60%, | |
| 1575 | + 75%, | |
| 1576 | + 90%, | |
| 1577 | + to { | |
| 1578 | + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1579 | + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
| 1580 | + } | |
| 1581 | + | |
| 1582 | + from { | |
| 1583 | + opacity: 0; | |
| 1584 | + -webkit-transform: translate3d(0, 3000px, 0) scaleY(5); | |
| 1585 | + transform: translate3d(0, 3000px, 0) scaleY(5); | |
| 1586 | + } | |
| 1587 | + | |
| 1588 | + 60% { | |
| 1589 | + opacity: 1; | |
| 1590 | + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); | |
| 1591 | + transform: translate3d(0, -20px, 0) scaleY(0.9); | |
| 1592 | + } | |
| 1593 | + | |
| 1594 | + 75% { | |
| 1595 | + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95); | |
| 1596 | + transform: translate3d(0, 10px, 0) scaleY(0.95); | |
| 1597 | + } | |
| 1598 | + | |
| 1599 | + 90% { | |
| 1600 | + -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985); | |
| 1601 | + transform: translate3d(0, -5px, 0) scaleY(0.985); | |
| 1602 | + } | |
| 1603 | + | |
| 1604 | + to { | |
| 1605 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1606 | + transform: translate3d(0, 0, 0); | |
| 1607 | + } | |
| 1608 | +} | |
| 1609 | +.animate__bounceInUp { | |
| 1610 | + -webkit-animation-name: bounceInUp; | |
| 1611 | + animation-name: bounceInUp; | |
| 1612 | +} | |
| 1613 | +/* Bouncing exits */ | |
| 1614 | +@-webkit-keyframes bounceOut { | |
| 1615 | + 20% { | |
| 1616 | + -webkit-transform: scale3d(0.9, 0.9, 0.9); | |
| 1617 | + transform: scale3d(0.9, 0.9, 0.9); | |
| 1618 | + } | |
| 1619 | + | |
| 1620 | + 50%, | |
| 1621 | + 55% { | |
| 1622 | + opacity: 1; | |
| 1623 | + -webkit-transform: scale3d(1.1, 1.1, 1.1); | |
| 1624 | + transform: scale3d(1.1, 1.1, 1.1); | |
| 1625 | + } | |
| 1626 | + | |
| 1627 | + to { | |
| 1628 | + opacity: 0; | |
| 1629 | + -webkit-transform: scale3d(0.3, 0.3, 0.3); | |
| 1630 | + transform: scale3d(0.3, 0.3, 0.3); | |
| 1631 | + } | |
| 1632 | +} | |
| 1633 | +@keyframes bounceOut { | |
| 1634 | + 20% { | |
| 1635 | + -webkit-transform: scale3d(0.9, 0.9, 0.9); | |
| 1636 | + transform: scale3d(0.9, 0.9, 0.9); | |
| 1637 | + } | |
| 1638 | + | |
| 1639 | + 50%, | |
| 1640 | + 55% { | |
| 1641 | + opacity: 1; | |
| 1642 | + -webkit-transform: scale3d(1.1, 1.1, 1.1); | |
| 1643 | + transform: scale3d(1.1, 1.1, 1.1); | |
| 1644 | + } | |
| 1645 | + | |
| 1646 | + to { | |
| 1647 | + opacity: 0; | |
| 1648 | + -webkit-transform: scale3d(0.3, 0.3, 0.3); | |
| 1649 | + transform: scale3d(0.3, 0.3, 0.3); | |
| 1650 | + } | |
| 1651 | +} | |
| 1652 | +.animate__bounceOut { | |
| 1653 | + -webkit-animation-duration: calc(1s * 0.75); | |
| 1654 | + animation-duration: calc(1s * 0.75); | |
| 1655 | + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); | |
| 1656 | + animation-duration: calc(var(--animate-duration) * 0.75); | |
| 1657 | + -webkit-animation-name: bounceOut; | |
| 1658 | + animation-name: bounceOut; | |
| 1659 | +} | |
| 1660 | +@-webkit-keyframes bounceOutDown { | |
| 1661 | + 20% { | |
| 1662 | + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); | |
| 1663 | + transform: translate3d(0, 10px, 0) scaleY(0.985); | |
| 1664 | + } | |
| 1665 | + | |
| 1666 | + 40%, | |
| 1667 | + 45% { | |
| 1668 | + opacity: 1; | |
| 1669 | + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); | |
| 1670 | + transform: translate3d(0, -20px, 0) scaleY(0.9); | |
| 1671 | + } | |
| 1672 | + | |
| 1673 | + to { | |
| 1674 | + opacity: 0; | |
| 1675 | + -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); | |
| 1676 | + transform: translate3d(0, 2000px, 0) scaleY(3); | |
| 1677 | + } | |
| 1678 | +} | |
| 1679 | +@keyframes bounceOutDown { | |
| 1680 | + 20% { | |
| 1681 | + -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985); | |
| 1682 | + transform: translate3d(0, 10px, 0) scaleY(0.985); | |
| 1683 | + } | |
| 1684 | + | |
| 1685 | + 40%, | |
| 1686 | + 45% { | |
| 1687 | + opacity: 1; | |
| 1688 | + -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9); | |
| 1689 | + transform: translate3d(0, -20px, 0) scaleY(0.9); | |
| 1690 | + } | |
| 1691 | + | |
| 1692 | + to { | |
| 1693 | + opacity: 0; | |
| 1694 | + -webkit-transform: translate3d(0, 2000px, 0) scaleY(3); | |
| 1695 | + transform: translate3d(0, 2000px, 0) scaleY(3); | |
| 1696 | + } | |
| 1697 | +} | |
| 1698 | +.animate__bounceOutDown { | |
| 1699 | + -webkit-animation-name: bounceOutDown; | |
| 1700 | + animation-name: bounceOutDown; | |
| 1701 | +} | |
| 1702 | +@-webkit-keyframes bounceOutLeft { | |
| 1703 | + 20% { | |
| 1704 | + opacity: 1; | |
| 1705 | + -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); | |
| 1706 | + transform: translate3d(20px, 0, 0) scaleX(0.9); | |
| 1707 | + } | |
| 1708 | + | |
| 1709 | + to { | |
| 1710 | + opacity: 0; | |
| 1711 | + -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); | |
| 1712 | + transform: translate3d(-2000px, 0, 0) scaleX(2); | |
| 1713 | + } | |
| 1714 | +} | |
| 1715 | +@keyframes bounceOutLeft { | |
| 1716 | + 20% { | |
| 1717 | + opacity: 1; | |
| 1718 | + -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9); | |
| 1719 | + transform: translate3d(20px, 0, 0) scaleX(0.9); | |
| 1720 | + } | |
| 1721 | + | |
| 1722 | + to { | |
| 1723 | + opacity: 0; | |
| 1724 | + -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2); | |
| 1725 | + transform: translate3d(-2000px, 0, 0) scaleX(2); | |
| 1726 | + } | |
| 1727 | +} | |
| 1728 | +.animate__bounceOutLeft { | |
| 1729 | + -webkit-animation-name: bounceOutLeft; | |
| 1730 | + animation-name: bounceOutLeft; | |
| 1731 | +} | |
| 1732 | +@-webkit-keyframes bounceOutRight { | |
| 1733 | + 20% { | |
| 1734 | + opacity: 1; | |
| 1735 | + -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); | |
| 1736 | + transform: translate3d(-20px, 0, 0) scaleX(0.9); | |
| 1737 | + } | |
| 1738 | + | |
| 1739 | + to { | |
| 1740 | + opacity: 0; | |
| 1741 | + -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); | |
| 1742 | + transform: translate3d(2000px, 0, 0) scaleX(2); | |
| 1743 | + } | |
| 1744 | +} | |
| 1745 | +@keyframes bounceOutRight { | |
| 1746 | + 20% { | |
| 1747 | + opacity: 1; | |
| 1748 | + -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9); | |
| 1749 | + transform: translate3d(-20px, 0, 0) scaleX(0.9); | |
| 1750 | + } | |
| 1751 | + | |
| 1752 | + to { | |
| 1753 | + opacity: 0; | |
| 1754 | + -webkit-transform: translate3d(2000px, 0, 0) scaleX(2); | |
| 1755 | + transform: translate3d(2000px, 0, 0) scaleX(2); | |
| 1756 | + } | |
| 1757 | +} | |
| 1758 | +.animate__bounceOutRight { | |
| 1759 | + -webkit-animation-name: bounceOutRight; | |
| 1760 | + animation-name: bounceOutRight; | |
| 1761 | +} | |
| 1762 | +@-webkit-keyframes bounceOutUp { | |
| 1763 | + 20% { | |
| 1764 | + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); | |
| 1765 | + transform: translate3d(0, -10px, 0) scaleY(0.985); | |
| 1766 | + } | |
| 1767 | + | |
| 1768 | + 40%, | |
| 1769 | + 45% { | |
| 1770 | + opacity: 1; | |
| 1771 | + -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); | |
| 1772 | + transform: translate3d(0, 20px, 0) scaleY(0.9); | |
| 1773 | + } | |
| 1774 | + | |
| 1775 | + to { | |
| 1776 | + opacity: 0; | |
| 1777 | + -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); | |
| 1778 | + transform: translate3d(0, -2000px, 0) scaleY(3); | |
| 1779 | + } | |
| 1780 | +} | |
| 1781 | +@keyframes bounceOutUp { | |
| 1782 | + 20% { | |
| 1783 | + -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985); | |
| 1784 | + transform: translate3d(0, -10px, 0) scaleY(0.985); | |
| 1785 | + } | |
| 1786 | + | |
| 1787 | + 40%, | |
| 1788 | + 45% { | |
| 1789 | + opacity: 1; | |
| 1790 | + -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9); | |
| 1791 | + transform: translate3d(0, 20px, 0) scaleY(0.9); | |
| 1792 | + } | |
| 1793 | + | |
| 1794 | + to { | |
| 1795 | + opacity: 0; | |
| 1796 | + -webkit-transform: translate3d(0, -2000px, 0) scaleY(3); | |
| 1797 | + transform: translate3d(0, -2000px, 0) scaleY(3); | |
| 1798 | + } | |
| 1799 | +} | |
| 1800 | +.animate__bounceOutUp { | |
| 1801 | + -webkit-animation-name: bounceOutUp; | |
| 1802 | + animation-name: bounceOutUp; | |
| 1803 | +} | |
| 1804 | +/* Fading entrances */ | |
| 1805 | +@-webkit-keyframes fadeIn { | |
| 1806 | + from { | |
| 1807 | + opacity: 0; | |
| 1808 | + } | |
| 1809 | + | |
| 1810 | + to { | |
| 1811 | + opacity: 1; | |
| 1812 | + } | |
| 1813 | +} | |
| 1814 | +@keyframes fadeIn { | |
| 1815 | + from { | |
| 1816 | + opacity: 0; | |
| 1817 | + } | |
| 1818 | + | |
| 1819 | + to { | |
| 1820 | + opacity: 1; | |
| 1821 | + } | |
| 1822 | +} | |
| 1823 | +.animate__fadeIn { | |
| 1824 | + -webkit-animation-name: fadeIn; | |
| 1825 | + animation-name: fadeIn; | |
| 1826 | +} | |
| 1827 | +@-webkit-keyframes fadeInDown { | |
| 1828 | + from { | |
| 1829 | + opacity: 0; | |
| 1830 | + -webkit-transform: translate3d(0, -100%, 0); | |
| 1831 | + transform: translate3d(0, -100%, 0); | |
| 1832 | + } | |
| 1833 | + | |
| 1834 | + to { | |
| 1835 | + opacity: 1; | |
| 1836 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1837 | + transform: translate3d(0, 0, 0); | |
| 1838 | + } | |
| 1839 | +} | |
| 1840 | +@keyframes fadeInDown { | |
| 1841 | + from { | |
| 1842 | + opacity: 0; | |
| 1843 | + -webkit-transform: translate3d(0, -100%, 0); | |
| 1844 | + transform: translate3d(0, -100%, 0); | |
| 1845 | + } | |
| 1846 | + | |
| 1847 | + to { | |
| 1848 | + opacity: 1; | |
| 1849 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1850 | + transform: translate3d(0, 0, 0); | |
| 1851 | + } | |
| 1852 | +} | |
| 1853 | +.animate__fadeInDown { | |
| 1854 | + -webkit-animation-name: fadeInDown; | |
| 1855 | + animation-name: fadeInDown; | |
| 1856 | +} | |
| 1857 | +@-webkit-keyframes fadeInDownBig { | |
| 1858 | + from { | |
| 1859 | + opacity: 0; | |
| 1860 | + -webkit-transform: translate3d(0, -2000px, 0); | |
| 1861 | + transform: translate3d(0, -2000px, 0); | |
| 1862 | + } | |
| 1863 | + | |
| 1864 | + to { | |
| 1865 | + opacity: 1; | |
| 1866 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1867 | + transform: translate3d(0, 0, 0); | |
| 1868 | + } | |
| 1869 | +} | |
| 1870 | +@keyframes fadeInDownBig { | |
| 1871 | + from { | |
| 1872 | + opacity: 0; | |
| 1873 | + -webkit-transform: translate3d(0, -2000px, 0); | |
| 1874 | + transform: translate3d(0, -2000px, 0); | |
| 1875 | + } | |
| 1876 | + | |
| 1877 | + to { | |
| 1878 | + opacity: 1; | |
| 1879 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1880 | + transform: translate3d(0, 0, 0); | |
| 1881 | + } | |
| 1882 | +} | |
| 1883 | +.animate__fadeInDownBig { | |
| 1884 | + -webkit-animation-name: fadeInDownBig; | |
| 1885 | + animation-name: fadeInDownBig; | |
| 1886 | +} | |
| 1887 | +@-webkit-keyframes fadeInLeft { | |
| 1888 | + from { | |
| 1889 | + opacity: 0; | |
| 1890 | + -webkit-transform: translate3d(-100%, 0, 0); | |
| 1891 | + transform: translate3d(-100%, 0, 0); | |
| 1892 | + } | |
| 1893 | + | |
| 1894 | + to { | |
| 1895 | + opacity: 1; | |
| 1896 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1897 | + transform: translate3d(0, 0, 0); | |
| 1898 | + } | |
| 1899 | +} | |
| 1900 | +@keyframes fadeInLeft { | |
| 1901 | + from { | |
| 1902 | + opacity: 0; | |
| 1903 | + -webkit-transform: translate3d(-100%, 0, 0); | |
| 1904 | + transform: translate3d(-100%, 0, 0); | |
| 1905 | + } | |
| 1906 | + | |
| 1907 | + to { | |
| 1908 | + opacity: 1; | |
| 1909 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1910 | + transform: translate3d(0, 0, 0); | |
| 1911 | + } | |
| 1912 | +} | |
| 1913 | +.animate__fadeInLeft { | |
| 1914 | + -webkit-animation-name: fadeInLeft; | |
| 1915 | + animation-name: fadeInLeft; | |
| 1916 | +} | |
| 1917 | +@-webkit-keyframes fadeInLeftBig { | |
| 1918 | + from { | |
| 1919 | + opacity: 0; | |
| 1920 | + -webkit-transform: translate3d(-2000px, 0, 0); | |
| 1921 | + transform: translate3d(-2000px, 0, 0); | |
| 1922 | + } | |
| 1923 | + | |
| 1924 | + to { | |
| 1925 | + opacity: 1; | |
| 1926 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1927 | + transform: translate3d(0, 0, 0); | |
| 1928 | + } | |
| 1929 | +} | |
| 1930 | +@keyframes fadeInLeftBig { | |
| 1931 | + from { | |
| 1932 | + opacity: 0; | |
| 1933 | + -webkit-transform: translate3d(-2000px, 0, 0); | |
| 1934 | + transform: translate3d(-2000px, 0, 0); | |
| 1935 | + } | |
| 1936 | + | |
| 1937 | + to { | |
| 1938 | + opacity: 1; | |
| 1939 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1940 | + transform: translate3d(0, 0, 0); | |
| 1941 | + } | |
| 1942 | +} | |
| 1943 | +.animate__fadeInLeftBig { | |
| 1944 | + -webkit-animation-name: fadeInLeftBig; | |
| 1945 | + animation-name: fadeInLeftBig; | |
| 1946 | +} | |
| 1947 | +@-webkit-keyframes fadeInRight { | |
| 1948 | + from { | |
| 1949 | + opacity: 0; | |
| 1950 | + -webkit-transform: translate3d(100%, 0, 0); | |
| 1951 | + transform: translate3d(100%, 0, 0); | |
| 1952 | + } | |
| 1953 | + | |
| 1954 | + to { | |
| 1955 | + opacity: 1; | |
| 1956 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1957 | + transform: translate3d(0, 0, 0); | |
| 1958 | + } | |
| 1959 | +} | |
| 1960 | +@keyframes fadeInRight { | |
| 1961 | + from { | |
| 1962 | + opacity: 0; | |
| 1963 | + -webkit-transform: translate3d(100%, 0, 0); | |
| 1964 | + transform: translate3d(100%, 0, 0); | |
| 1965 | + } | |
| 1966 | + | |
| 1967 | + to { | |
| 1968 | + opacity: 1; | |
| 1969 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1970 | + transform: translate3d(0, 0, 0); | |
| 1971 | + } | |
| 1972 | +} | |
| 1973 | +.animate__fadeInRight { | |
| 1974 | + -webkit-animation-name: fadeInRight; | |
| 1975 | + animation-name: fadeInRight; | |
| 1976 | +} | |
| 1977 | +@-webkit-keyframes fadeInRightBig { | |
| 1978 | + from { | |
| 1979 | + opacity: 0; | |
| 1980 | + -webkit-transform: translate3d(2000px, 0, 0); | |
| 1981 | + transform: translate3d(2000px, 0, 0); | |
| 1982 | + } | |
| 1983 | + | |
| 1984 | + to { | |
| 1985 | + opacity: 1; | |
| 1986 | + -webkit-transform: translate3d(0, 0, 0); | |
| 1987 | + transform: translate3d(0, 0, 0); | |
| 1988 | + } | |
| 1989 | +} | |
| 1990 | +@keyframes fadeInRightBig { | |
| 1991 | + from { | |
| 1992 | + opacity: 0; | |
| 1993 | + -webkit-transform: translate3d(2000px, 0, 0); | |
| 1994 | + transform: translate3d(2000px, 0, 0); | |
| 1995 | + } | |
| 1996 | + | |
| 1997 | + to { | |
| 1998 | + opacity: 1; | |
| 1999 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2000 | + transform: translate3d(0, 0, 0); | |
| 2001 | + } | |
| 2002 | +} | |
| 2003 | +.animate__fadeInRightBig { | |
| 2004 | + -webkit-animation-name: fadeInRightBig; | |
| 2005 | + animation-name: fadeInRightBig; | |
| 2006 | +} | |
| 2007 | +@-webkit-keyframes fadeInUp { | |
| 2008 | + from { | |
| 2009 | + opacity: 0; | |
| 2010 | + -webkit-transform: translate3d(0, 100%, 0); | |
| 2011 | + transform: translate3d(0, 100%, 0); | |
| 2012 | + } | |
| 2013 | + | |
| 2014 | + to { | |
| 2015 | + opacity: 1; | |
| 2016 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2017 | + transform: translate3d(0, 0, 0); | |
| 2018 | + } | |
| 2019 | +} | |
| 2020 | +@keyframes fadeInUp { | |
| 2021 | + from { | |
| 2022 | + opacity: 0; | |
| 2023 | + -webkit-transform: translate3d(0, 100%, 0); | |
| 2024 | + transform: translate3d(0, 100%, 0); | |
| 2025 | + } | |
| 2026 | + | |
| 2027 | + to { | |
| 2028 | + opacity: 1; | |
| 2029 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2030 | + transform: translate3d(0, 0, 0); | |
| 2031 | + } | |
| 2032 | +} | |
| 2033 | +.animate__fadeInUp { | |
| 2034 | + -webkit-animation-name: fadeInUp; | |
| 2035 | + animation-name: fadeInUp; | |
| 2036 | +} | |
| 2037 | +@-webkit-keyframes fadeInUpBig { | |
| 2038 | + from { | |
| 2039 | + opacity: 0; | |
| 2040 | + -webkit-transform: translate3d(0, 2000px, 0); | |
| 2041 | + transform: translate3d(0, 2000px, 0); | |
| 2042 | + } | |
| 2043 | + | |
| 2044 | + to { | |
| 2045 | + opacity: 1; | |
| 2046 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2047 | + transform: translate3d(0, 0, 0); | |
| 2048 | + } | |
| 2049 | +} | |
| 2050 | +@keyframes fadeInUpBig { | |
| 2051 | + from { | |
| 2052 | + opacity: 0; | |
| 2053 | + -webkit-transform: translate3d(0, 2000px, 0); | |
| 2054 | + transform: translate3d(0, 2000px, 0); | |
| 2055 | + } | |
| 2056 | + | |
| 2057 | + to { | |
| 2058 | + opacity: 1; | |
| 2059 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2060 | + transform: translate3d(0, 0, 0); | |
| 2061 | + } | |
| 2062 | +} | |
| 2063 | +.animate__fadeInUpBig { | |
| 2064 | + -webkit-animation-name: fadeInUpBig; | |
| 2065 | + animation-name: fadeInUpBig; | |
| 2066 | +} | |
| 2067 | +@-webkit-keyframes fadeInTopLeft { | |
| 2068 | + from { | |
| 2069 | + opacity: 0; | |
| 2070 | + -webkit-transform: translate3d(-100%, -100%, 0); | |
| 2071 | + transform: translate3d(-100%, -100%, 0); | |
| 2072 | + } | |
| 2073 | + to { | |
| 2074 | + opacity: 1; | |
| 2075 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2076 | + transform: translate3d(0, 0, 0); | |
| 2077 | + } | |
| 2078 | +} | |
| 2079 | +@keyframes fadeInTopLeft { | |
| 2080 | + from { | |
| 2081 | + opacity: 0; | |
| 2082 | + -webkit-transform: translate3d(-100%, -100%, 0); | |
| 2083 | + transform: translate3d(-100%, -100%, 0); | |
| 2084 | + } | |
| 2085 | + to { | |
| 2086 | + opacity: 1; | |
| 2087 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2088 | + transform: translate3d(0, 0, 0); | |
| 2089 | + } | |
| 2090 | +} | |
| 2091 | +.animate__fadeInTopLeft { | |
| 2092 | + -webkit-animation-name: fadeInTopLeft; | |
| 2093 | + animation-name: fadeInTopLeft; | |
| 2094 | +} | |
| 2095 | +@-webkit-keyframes fadeInTopRight { | |
| 2096 | + from { | |
| 2097 | + opacity: 0; | |
| 2098 | + -webkit-transform: translate3d(100%, -100%, 0); | |
| 2099 | + transform: translate3d(100%, -100%, 0); | |
| 2100 | + } | |
| 2101 | + to { | |
| 2102 | + opacity: 1; | |
| 2103 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2104 | + transform: translate3d(0, 0, 0); | |
| 2105 | + } | |
| 2106 | +} | |
| 2107 | +@keyframes fadeInTopRight { | |
| 2108 | + from { | |
| 2109 | + opacity: 0; | |
| 2110 | + -webkit-transform: translate3d(100%, -100%, 0); | |
| 2111 | + transform: translate3d(100%, -100%, 0); | |
| 2112 | + } | |
| 2113 | + to { | |
| 2114 | + opacity: 1; | |
| 2115 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2116 | + transform: translate3d(0, 0, 0); | |
| 2117 | + } | |
| 2118 | +} | |
| 2119 | +.animate__fadeInTopRight { | |
| 2120 | + -webkit-animation-name: fadeInTopRight; | |
| 2121 | + animation-name: fadeInTopRight; | |
| 2122 | +} | |
| 2123 | +@-webkit-keyframes fadeInBottomLeft { | |
| 2124 | + from { | |
| 2125 | + opacity: 0; | |
| 2126 | + -webkit-transform: translate3d(-100%, 100%, 0); | |
| 2127 | + transform: translate3d(-100%, 100%, 0); | |
| 2128 | + } | |
| 2129 | + to { | |
| 2130 | + opacity: 1; | |
| 2131 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2132 | + transform: translate3d(0, 0, 0); | |
| 2133 | + } | |
| 2134 | +} | |
| 2135 | +@keyframes fadeInBottomLeft { | |
| 2136 | + from { | |
| 2137 | + opacity: 0; | |
| 2138 | + -webkit-transform: translate3d(-100%, 100%, 0); | |
| 2139 | + transform: translate3d(-100%, 100%, 0); | |
| 2140 | + } | |
| 2141 | + to { | |
| 2142 | + opacity: 1; | |
| 2143 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2144 | + transform: translate3d(0, 0, 0); | |
| 2145 | + } | |
| 2146 | +} | |
| 2147 | +.animate__fadeInBottomLeft { | |
| 2148 | + -webkit-animation-name: fadeInBottomLeft; | |
| 2149 | + animation-name: fadeInBottomLeft; | |
| 2150 | +} | |
| 2151 | +@-webkit-keyframes fadeInBottomRight { | |
| 2152 | + from { | |
| 2153 | + opacity: 0; | |
| 2154 | + -webkit-transform: translate3d(100%, 100%, 0); | |
| 2155 | + transform: translate3d(100%, 100%, 0); | |
| 2156 | + } | |
| 2157 | + to { | |
| 2158 | + opacity: 1; | |
| 2159 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2160 | + transform: translate3d(0, 0, 0); | |
| 2161 | + } | |
| 2162 | +} | |
| 2163 | +@keyframes fadeInBottomRight { | |
| 2164 | + from { | |
| 2165 | + opacity: 0; | |
| 2166 | + -webkit-transform: translate3d(100%, 100%, 0); | |
| 2167 | + transform: translate3d(100%, 100%, 0); | |
| 2168 | + } | |
| 2169 | + to { | |
| 2170 | + opacity: 1; | |
| 2171 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2172 | + transform: translate3d(0, 0, 0); | |
| 2173 | + } | |
| 2174 | +} | |
| 2175 | +.animate__fadeInBottomRight { | |
| 2176 | + -webkit-animation-name: fadeInBottomRight; | |
| 2177 | + animation-name: fadeInBottomRight; | |
| 2178 | +} | |
| 2179 | +/* Fading exits */ | |
| 2180 | +@-webkit-keyframes fadeOut { | |
| 2181 | + from { | |
| 2182 | + opacity: 1; | |
| 2183 | + } | |
| 2184 | + | |
| 2185 | + to { | |
| 2186 | + opacity: 0; | |
| 2187 | + } | |
| 2188 | +} | |
| 2189 | +@keyframes fadeOut { | |
| 2190 | + from { | |
| 2191 | + opacity: 1; | |
| 2192 | + } | |
| 2193 | + | |
| 2194 | + to { | |
| 2195 | + opacity: 0; | |
| 2196 | + } | |
| 2197 | +} | |
| 2198 | +.animate__fadeOut { | |
| 2199 | + -webkit-animation-name: fadeOut; | |
| 2200 | + animation-name: fadeOut; | |
| 2201 | +} | |
| 2202 | +@-webkit-keyframes fadeOutDown { | |
| 2203 | + from { | |
| 2204 | + opacity: 1; | |
| 2205 | + } | |
| 2206 | + | |
| 2207 | + to { | |
| 2208 | + opacity: 0; | |
| 2209 | + -webkit-transform: translate3d(0, 100%, 0); | |
| 2210 | + transform: translate3d(0, 100%, 0); | |
| 2211 | + } | |
| 2212 | +} | |
| 2213 | +@keyframes fadeOutDown { | |
| 2214 | + from { | |
| 2215 | + opacity: 1; | |
| 2216 | + } | |
| 2217 | + | |
| 2218 | + to { | |
| 2219 | + opacity: 0; | |
| 2220 | + -webkit-transform: translate3d(0, 100%, 0); | |
| 2221 | + transform: translate3d(0, 100%, 0); | |
| 2222 | + } | |
| 2223 | +} | |
| 2224 | +.animate__fadeOutDown { | |
| 2225 | + -webkit-animation-name: fadeOutDown; | |
| 2226 | + animation-name: fadeOutDown; | |
| 2227 | +} | |
| 2228 | +@-webkit-keyframes fadeOutDownBig { | |
| 2229 | + from { | |
| 2230 | + opacity: 1; | |
| 2231 | + } | |
| 2232 | + | |
| 2233 | + to { | |
| 2234 | + opacity: 0; | |
| 2235 | + -webkit-transform: translate3d(0, 2000px, 0); | |
| 2236 | + transform: translate3d(0, 2000px, 0); | |
| 2237 | + } | |
| 2238 | +} | |
| 2239 | +@keyframes fadeOutDownBig { | |
| 2240 | + from { | |
| 2241 | + opacity: 1; | |
| 2242 | + } | |
| 2243 | + | |
| 2244 | + to { | |
| 2245 | + opacity: 0; | |
| 2246 | + -webkit-transform: translate3d(0, 2000px, 0); | |
| 2247 | + transform: translate3d(0, 2000px, 0); | |
| 2248 | + } | |
| 2249 | +} | |
| 2250 | +.animate__fadeOutDownBig { | |
| 2251 | + -webkit-animation-name: fadeOutDownBig; | |
| 2252 | + animation-name: fadeOutDownBig; | |
| 2253 | +} | |
| 2254 | +@-webkit-keyframes fadeOutLeft { | |
| 2255 | + from { | |
| 2256 | + opacity: 1; | |
| 2257 | + } | |
| 2258 | + | |
| 2259 | + to { | |
| 2260 | + opacity: 0; | |
| 2261 | + -webkit-transform: translate3d(-100%, 0, 0); | |
| 2262 | + transform: translate3d(-100%, 0, 0); | |
| 2263 | + } | |
| 2264 | +} | |
| 2265 | +@keyframes fadeOutLeft { | |
| 2266 | + from { | |
| 2267 | + opacity: 1; | |
| 2268 | + } | |
| 2269 | + | |
| 2270 | + to { | |
| 2271 | + opacity: 0; | |
| 2272 | + -webkit-transform: translate3d(-100%, 0, 0); | |
| 2273 | + transform: translate3d(-100%, 0, 0); | |
| 2274 | + } | |
| 2275 | +} | |
| 2276 | +.animate__fadeOutLeft { | |
| 2277 | + -webkit-animation-name: fadeOutLeft; | |
| 2278 | + animation-name: fadeOutLeft; | |
| 2279 | +} | |
| 2280 | +@-webkit-keyframes fadeOutLeftBig { | |
| 2281 | + from { | |
| 2282 | + opacity: 1; | |
| 2283 | + } | |
| 2284 | + | |
| 2285 | + to { | |
| 2286 | + opacity: 0; | |
| 2287 | + -webkit-transform: translate3d(-2000px, 0, 0); | |
| 2288 | + transform: translate3d(-2000px, 0, 0); | |
| 2289 | + } | |
| 2290 | +} | |
| 2291 | +@keyframes fadeOutLeftBig { | |
| 2292 | + from { | |
| 2293 | + opacity: 1; | |
| 2294 | + } | |
| 2295 | + | |
| 2296 | + to { | |
| 2297 | + opacity: 0; | |
| 2298 | + -webkit-transform: translate3d(-2000px, 0, 0); | |
| 2299 | + transform: translate3d(-2000px, 0, 0); | |
| 2300 | + } | |
| 2301 | +} | |
| 2302 | +.animate__fadeOutLeftBig { | |
| 2303 | + -webkit-animation-name: fadeOutLeftBig; | |
| 2304 | + animation-name: fadeOutLeftBig; | |
| 2305 | +} | |
| 2306 | +@-webkit-keyframes fadeOutRight { | |
| 2307 | + from { | |
| 2308 | + opacity: 1; | |
| 2309 | + } | |
| 2310 | + | |
| 2311 | + to { | |
| 2312 | + opacity: 0; | |
| 2313 | + -webkit-transform: translate3d(100%, 0, 0); | |
| 2314 | + transform: translate3d(100%, 0, 0); | |
| 2315 | + } | |
| 2316 | +} | |
| 2317 | +@keyframes fadeOutRight { | |
| 2318 | + from { | |
| 2319 | + opacity: 1; | |
| 2320 | + } | |
| 2321 | + | |
| 2322 | + to { | |
| 2323 | + opacity: 0; | |
| 2324 | + -webkit-transform: translate3d(100%, 0, 0); | |
| 2325 | + transform: translate3d(100%, 0, 0); | |
| 2326 | + } | |
| 2327 | +} | |
| 2328 | +.animate__fadeOutRight { | |
| 2329 | + -webkit-animation-name: fadeOutRight; | |
| 2330 | + animation-name: fadeOutRight; | |
| 2331 | +} | |
| 2332 | +@-webkit-keyframes fadeOutRightBig { | |
| 2333 | + from { | |
| 2334 | + opacity: 1; | |
| 2335 | + } | |
| 2336 | + | |
| 2337 | + to { | |
| 2338 | + opacity: 0; | |
| 2339 | + -webkit-transform: translate3d(2000px, 0, 0); | |
| 2340 | + transform: translate3d(2000px, 0, 0); | |
| 2341 | + } | |
| 2342 | +} | |
| 2343 | +@keyframes fadeOutRightBig { | |
| 2344 | + from { | |
| 2345 | + opacity: 1; | |
| 2346 | + } | |
| 2347 | + | |
| 2348 | + to { | |
| 2349 | + opacity: 0; | |
| 2350 | + -webkit-transform: translate3d(2000px, 0, 0); | |
| 2351 | + transform: translate3d(2000px, 0, 0); | |
| 2352 | + } | |
| 2353 | +} | |
| 2354 | +.animate__fadeOutRightBig { | |
| 2355 | + -webkit-animation-name: fadeOutRightBig; | |
| 2356 | + animation-name: fadeOutRightBig; | |
| 2357 | +} | |
| 2358 | +@-webkit-keyframes fadeOutUp { | |
| 2359 | + from { | |
| 2360 | + opacity: 1; | |
| 2361 | + } | |
| 2362 | + | |
| 2363 | + to { | |
| 2364 | + opacity: 0; | |
| 2365 | + -webkit-transform: translate3d(0, -100%, 0); | |
| 2366 | + transform: translate3d(0, -100%, 0); | |
| 2367 | + } | |
| 2368 | +} | |
| 2369 | +@keyframes fadeOutUp { | |
| 2370 | + from { | |
| 2371 | + opacity: 1; | |
| 2372 | + } | |
| 2373 | + | |
| 2374 | + to { | |
| 2375 | + opacity: 0; | |
| 2376 | + -webkit-transform: translate3d(0, -100%, 0); | |
| 2377 | + transform: translate3d(0, -100%, 0); | |
| 2378 | + } | |
| 2379 | +} | |
| 2380 | +.animate__fadeOutUp { | |
| 2381 | + -webkit-animation-name: fadeOutUp; | |
| 2382 | + animation-name: fadeOutUp; | |
| 2383 | +} | |
| 2384 | +@-webkit-keyframes fadeOutUpBig { | |
| 2385 | + from { | |
| 2386 | + opacity: 1; | |
| 2387 | + } | |
| 2388 | + | |
| 2389 | + to { | |
| 2390 | + opacity: 0; | |
| 2391 | + -webkit-transform: translate3d(0, -2000px, 0); | |
| 2392 | + transform: translate3d(0, -2000px, 0); | |
| 2393 | + } | |
| 2394 | +} | |
| 2395 | +@keyframes fadeOutUpBig { | |
| 2396 | + from { | |
| 2397 | + opacity: 1; | |
| 2398 | + } | |
| 2399 | + | |
| 2400 | + to { | |
| 2401 | + opacity: 0; | |
| 2402 | + -webkit-transform: translate3d(0, -2000px, 0); | |
| 2403 | + transform: translate3d(0, -2000px, 0); | |
| 2404 | + } | |
| 2405 | +} | |
| 2406 | +.animate__fadeOutUpBig { | |
| 2407 | + -webkit-animation-name: fadeOutUpBig; | |
| 2408 | + animation-name: fadeOutUpBig; | |
| 2409 | +} | |
| 2410 | +@-webkit-keyframes fadeOutTopLeft { | |
| 2411 | + from { | |
| 2412 | + opacity: 1; | |
| 2413 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2414 | + transform: translate3d(0, 0, 0); | |
| 2415 | + } | |
| 2416 | + to { | |
| 2417 | + opacity: 0; | |
| 2418 | + -webkit-transform: translate3d(-100%, -100%, 0); | |
| 2419 | + transform: translate3d(-100%, -100%, 0); | |
| 2420 | + } | |
| 2421 | +} | |
| 2422 | +@keyframes fadeOutTopLeft { | |
| 2423 | + from { | |
| 2424 | + opacity: 1; | |
| 2425 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2426 | + transform: translate3d(0, 0, 0); | |
| 2427 | + } | |
| 2428 | + to { | |
| 2429 | + opacity: 0; | |
| 2430 | + -webkit-transform: translate3d(-100%, -100%, 0); | |
| 2431 | + transform: translate3d(-100%, -100%, 0); | |
| 2432 | + } | |
| 2433 | +} | |
| 2434 | +.animate__fadeOutTopLeft { | |
| 2435 | + -webkit-animation-name: fadeOutTopLeft; | |
| 2436 | + animation-name: fadeOutTopLeft; | |
| 2437 | +} | |
| 2438 | +@-webkit-keyframes fadeOutTopRight { | |
| 2439 | + from { | |
| 2440 | + opacity: 1; | |
| 2441 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2442 | + transform: translate3d(0, 0, 0); | |
| 2443 | + } | |
| 2444 | + to { | |
| 2445 | + opacity: 0; | |
| 2446 | + -webkit-transform: translate3d(100%, -100%, 0); | |
| 2447 | + transform: translate3d(100%, -100%, 0); | |
| 2448 | + } | |
| 2449 | +} | |
| 2450 | +@keyframes fadeOutTopRight { | |
| 2451 | + from { | |
| 2452 | + opacity: 1; | |
| 2453 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2454 | + transform: translate3d(0, 0, 0); | |
| 2455 | + } | |
| 2456 | + to { | |
| 2457 | + opacity: 0; | |
| 2458 | + -webkit-transform: translate3d(100%, -100%, 0); | |
| 2459 | + transform: translate3d(100%, -100%, 0); | |
| 2460 | + } | |
| 2461 | +} | |
| 2462 | +.animate__fadeOutTopRight { | |
| 2463 | + -webkit-animation-name: fadeOutTopRight; | |
| 2464 | + animation-name: fadeOutTopRight; | |
| 2465 | +} | |
| 2466 | +@-webkit-keyframes fadeOutBottomRight { | |
| 2467 | + from { | |
| 2468 | + opacity: 1; | |
| 2469 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2470 | + transform: translate3d(0, 0, 0); | |
| 2471 | + } | |
| 2472 | + to { | |
| 2473 | + opacity: 0; | |
| 2474 | + -webkit-transform: translate3d(100%, 100%, 0); | |
| 2475 | + transform: translate3d(100%, 100%, 0); | |
| 2476 | + } | |
| 2477 | +} | |
| 2478 | +@keyframes fadeOutBottomRight { | |
| 2479 | + from { | |
| 2480 | + opacity: 1; | |
| 2481 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2482 | + transform: translate3d(0, 0, 0); | |
| 2483 | + } | |
| 2484 | + to { | |
| 2485 | + opacity: 0; | |
| 2486 | + -webkit-transform: translate3d(100%, 100%, 0); | |
| 2487 | + transform: translate3d(100%, 100%, 0); | |
| 2488 | + } | |
| 2489 | +} | |
| 2490 | +.animate__fadeOutBottomRight { | |
| 2491 | + -webkit-animation-name: fadeOutBottomRight; | |
| 2492 | + animation-name: fadeOutBottomRight; | |
| 2493 | +} | |
| 2494 | +@-webkit-keyframes fadeOutBottomLeft { | |
| 2495 | + from { | |
| 2496 | + opacity: 1; | |
| 2497 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2498 | + transform: translate3d(0, 0, 0); | |
| 2499 | + } | |
| 2500 | + to { | |
| 2501 | + opacity: 0; | |
| 2502 | + -webkit-transform: translate3d(-100%, 100%, 0); | |
| 2503 | + transform: translate3d(-100%, 100%, 0); | |
| 2504 | + } | |
| 2505 | +} | |
| 2506 | +@keyframes fadeOutBottomLeft { | |
| 2507 | + from { | |
| 2508 | + opacity: 1; | |
| 2509 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2510 | + transform: translate3d(0, 0, 0); | |
| 2511 | + } | |
| 2512 | + to { | |
| 2513 | + opacity: 0; | |
| 2514 | + -webkit-transform: translate3d(-100%, 100%, 0); | |
| 2515 | + transform: translate3d(-100%, 100%, 0); | |
| 2516 | + } | |
| 2517 | +} | |
| 2518 | +.animate__fadeOutBottomLeft { | |
| 2519 | + -webkit-animation-name: fadeOutBottomLeft; | |
| 2520 | + animation-name: fadeOutBottomLeft; | |
| 2521 | +} | |
| 2522 | +/* Flippers */ | |
| 2523 | +@-webkit-keyframes flip { | |
| 2524 | + from { | |
| 2525 | + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); | |
| 2526 | + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); | |
| 2527 | + -webkit-animation-timing-function: ease-out; | |
| 2528 | + animation-timing-function: ease-out; | |
| 2529 | + } | |
| 2530 | + | |
| 2531 | + 40% { | |
| 2532 | + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
| 2533 | + rotate3d(0, 1, 0, -190deg); | |
| 2534 | + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
| 2535 | + rotate3d(0, 1, 0, -190deg); | |
| 2536 | + -webkit-animation-timing-function: ease-out; | |
| 2537 | + animation-timing-function: ease-out; | |
| 2538 | + } | |
| 2539 | + | |
| 2540 | + 50% { | |
| 2541 | + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
| 2542 | + rotate3d(0, 1, 0, -170deg); | |
| 2543 | + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
| 2544 | + rotate3d(0, 1, 0, -170deg); | |
| 2545 | + -webkit-animation-timing-function: ease-in; | |
| 2546 | + animation-timing-function: ease-in; | |
| 2547 | + } | |
| 2548 | + | |
| 2549 | + 80% { | |
| 2550 | + -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) | |
| 2551 | + rotate3d(0, 1, 0, 0deg); | |
| 2552 | + transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) | |
| 2553 | + rotate3d(0, 1, 0, 0deg); | |
| 2554 | + -webkit-animation-timing-function: ease-in; | |
| 2555 | + animation-timing-function: ease-in; | |
| 2556 | + } | |
| 2557 | + | |
| 2558 | + to { | |
| 2559 | + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); | |
| 2560 | + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); | |
| 2561 | + -webkit-animation-timing-function: ease-in; | |
| 2562 | + animation-timing-function: ease-in; | |
| 2563 | + } | |
| 2564 | +} | |
| 2565 | +@keyframes flip { | |
| 2566 | + from { | |
| 2567 | + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); | |
| 2568 | + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); | |
| 2569 | + -webkit-animation-timing-function: ease-out; | |
| 2570 | + animation-timing-function: ease-out; | |
| 2571 | + } | |
| 2572 | + | |
| 2573 | + 40% { | |
| 2574 | + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
| 2575 | + rotate3d(0, 1, 0, -190deg); | |
| 2576 | + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
| 2577 | + rotate3d(0, 1, 0, -190deg); | |
| 2578 | + -webkit-animation-timing-function: ease-out; | |
| 2579 | + animation-timing-function: ease-out; | |
| 2580 | + } | |
| 2581 | + | |
| 2582 | + 50% { | |
| 2583 | + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
| 2584 | + rotate3d(0, 1, 0, -170deg); | |
| 2585 | + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
| 2586 | + rotate3d(0, 1, 0, -170deg); | |
| 2587 | + -webkit-animation-timing-function: ease-in; | |
| 2588 | + animation-timing-function: ease-in; | |
| 2589 | + } | |
| 2590 | + | |
| 2591 | + 80% { | |
| 2592 | + -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) | |
| 2593 | + rotate3d(0, 1, 0, 0deg); | |
| 2594 | + transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) | |
| 2595 | + rotate3d(0, 1, 0, 0deg); | |
| 2596 | + -webkit-animation-timing-function: ease-in; | |
| 2597 | + animation-timing-function: ease-in; | |
| 2598 | + } | |
| 2599 | + | |
| 2600 | + to { | |
| 2601 | + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); | |
| 2602 | + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); | |
| 2603 | + -webkit-animation-timing-function: ease-in; | |
| 2604 | + animation-timing-function: ease-in; | |
| 2605 | + } | |
| 2606 | +} | |
| 2607 | +.animate__animated.animate__flip { | |
| 2608 | + -webkit-backface-visibility: visible; | |
| 2609 | + backface-visibility: visible; | |
| 2610 | + -webkit-animation-name: flip; | |
| 2611 | + animation-name: flip; | |
| 2612 | +} | |
| 2613 | +@-webkit-keyframes flipInX { | |
| 2614 | + from { | |
| 2615 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
| 2616 | + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
| 2617 | + -webkit-animation-timing-function: ease-in; | |
| 2618 | + animation-timing-function: ease-in; | |
| 2619 | + opacity: 0; | |
| 2620 | + } | |
| 2621 | + | |
| 2622 | + 40% { | |
| 2623 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
| 2624 | + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
| 2625 | + -webkit-animation-timing-function: ease-in; | |
| 2626 | + animation-timing-function: ease-in; | |
| 2627 | + } | |
| 2628 | + | |
| 2629 | + 60% { | |
| 2630 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
| 2631 | + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
| 2632 | + opacity: 1; | |
| 2633 | + } | |
| 2634 | + | |
| 2635 | + 80% { | |
| 2636 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
| 2637 | + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
| 2638 | + } | |
| 2639 | + | |
| 2640 | + to { | |
| 2641 | + -webkit-transform: perspective(400px); | |
| 2642 | + transform: perspective(400px); | |
| 2643 | + } | |
| 2644 | +} | |
| 2645 | +@keyframes flipInX { | |
| 2646 | + from { | |
| 2647 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
| 2648 | + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
| 2649 | + -webkit-animation-timing-function: ease-in; | |
| 2650 | + animation-timing-function: ease-in; | |
| 2651 | + opacity: 0; | |
| 2652 | + } | |
| 2653 | + | |
| 2654 | + 40% { | |
| 2655 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
| 2656 | + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
| 2657 | + -webkit-animation-timing-function: ease-in; | |
| 2658 | + animation-timing-function: ease-in; | |
| 2659 | + } | |
| 2660 | + | |
| 2661 | + 60% { | |
| 2662 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
| 2663 | + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
| 2664 | + opacity: 1; | |
| 2665 | + } | |
| 2666 | + | |
| 2667 | + 80% { | |
| 2668 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
| 2669 | + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
| 2670 | + } | |
| 2671 | + | |
| 2672 | + to { | |
| 2673 | + -webkit-transform: perspective(400px); | |
| 2674 | + transform: perspective(400px); | |
| 2675 | + } | |
| 2676 | +} | |
| 2677 | +.animate__flipInX { | |
| 2678 | + -webkit-backface-visibility: visible !important; | |
| 2679 | + backface-visibility: visible !important; | |
| 2680 | + -webkit-animation-name: flipInX; | |
| 2681 | + animation-name: flipInX; | |
| 2682 | +} | |
| 2683 | +@-webkit-keyframes flipInY { | |
| 2684 | + from { | |
| 2685 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
| 2686 | + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
| 2687 | + -webkit-animation-timing-function: ease-in; | |
| 2688 | + animation-timing-function: ease-in; | |
| 2689 | + opacity: 0; | |
| 2690 | + } | |
| 2691 | + | |
| 2692 | + 40% { | |
| 2693 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
| 2694 | + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
| 2695 | + -webkit-animation-timing-function: ease-in; | |
| 2696 | + animation-timing-function: ease-in; | |
| 2697 | + } | |
| 2698 | + | |
| 2699 | + 60% { | |
| 2700 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
| 2701 | + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
| 2702 | + opacity: 1; | |
| 2703 | + } | |
| 2704 | + | |
| 2705 | + 80% { | |
| 2706 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
| 2707 | + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
| 2708 | + } | |
| 2709 | + | |
| 2710 | + to { | |
| 2711 | + -webkit-transform: perspective(400px); | |
| 2712 | + transform: perspective(400px); | |
| 2713 | + } | |
| 2714 | +} | |
| 2715 | +@keyframes flipInY { | |
| 2716 | + from { | |
| 2717 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
| 2718 | + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
| 2719 | + -webkit-animation-timing-function: ease-in; | |
| 2720 | + animation-timing-function: ease-in; | |
| 2721 | + opacity: 0; | |
| 2722 | + } | |
| 2723 | + | |
| 2724 | + 40% { | |
| 2725 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
| 2726 | + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
| 2727 | + -webkit-animation-timing-function: ease-in; | |
| 2728 | + animation-timing-function: ease-in; | |
| 2729 | + } | |
| 2730 | + | |
| 2731 | + 60% { | |
| 2732 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
| 2733 | + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
| 2734 | + opacity: 1; | |
| 2735 | + } | |
| 2736 | + | |
| 2737 | + 80% { | |
| 2738 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
| 2739 | + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
| 2740 | + } | |
| 2741 | + | |
| 2742 | + to { | |
| 2743 | + -webkit-transform: perspective(400px); | |
| 2744 | + transform: perspective(400px); | |
| 2745 | + } | |
| 2746 | +} | |
| 2747 | +.animate__flipInY { | |
| 2748 | + -webkit-backface-visibility: visible !important; | |
| 2749 | + backface-visibility: visible !important; | |
| 2750 | + -webkit-animation-name: flipInY; | |
| 2751 | + animation-name: flipInY; | |
| 2752 | +} | |
| 2753 | +@-webkit-keyframes flipOutX { | |
| 2754 | + from { | |
| 2755 | + -webkit-transform: perspective(400px); | |
| 2756 | + transform: perspective(400px); | |
| 2757 | + } | |
| 2758 | + | |
| 2759 | + 30% { | |
| 2760 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
| 2761 | + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
| 2762 | + opacity: 1; | |
| 2763 | + } | |
| 2764 | + | |
| 2765 | + to { | |
| 2766 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
| 2767 | + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
| 2768 | + opacity: 0; | |
| 2769 | + } | |
| 2770 | +} | |
| 2771 | +@keyframes flipOutX { | |
| 2772 | + from { | |
| 2773 | + -webkit-transform: perspective(400px); | |
| 2774 | + transform: perspective(400px); | |
| 2775 | + } | |
| 2776 | + | |
| 2777 | + 30% { | |
| 2778 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
| 2779 | + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
| 2780 | + opacity: 1; | |
| 2781 | + } | |
| 2782 | + | |
| 2783 | + to { | |
| 2784 | + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
| 2785 | + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
| 2786 | + opacity: 0; | |
| 2787 | + } | |
| 2788 | +} | |
| 2789 | +.animate__flipOutX { | |
| 2790 | + -webkit-animation-duration: calc(1s * 0.75); | |
| 2791 | + animation-duration: calc(1s * 0.75); | |
| 2792 | + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); | |
| 2793 | + animation-duration: calc(var(--animate-duration) * 0.75); | |
| 2794 | + -webkit-animation-name: flipOutX; | |
| 2795 | + animation-name: flipOutX; | |
| 2796 | + -webkit-backface-visibility: visible !important; | |
| 2797 | + backface-visibility: visible !important; | |
| 2798 | +} | |
| 2799 | +@-webkit-keyframes flipOutY { | |
| 2800 | + from { | |
| 2801 | + -webkit-transform: perspective(400px); | |
| 2802 | + transform: perspective(400px); | |
| 2803 | + } | |
| 2804 | + | |
| 2805 | + 30% { | |
| 2806 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
| 2807 | + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
| 2808 | + opacity: 1; | |
| 2809 | + } | |
| 2810 | + | |
| 2811 | + to { | |
| 2812 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
| 2813 | + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
| 2814 | + opacity: 0; | |
| 2815 | + } | |
| 2816 | +} | |
| 2817 | +@keyframes flipOutY { | |
| 2818 | + from { | |
| 2819 | + -webkit-transform: perspective(400px); | |
| 2820 | + transform: perspective(400px); | |
| 2821 | + } | |
| 2822 | + | |
| 2823 | + 30% { | |
| 2824 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
| 2825 | + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
| 2826 | + opacity: 1; | |
| 2827 | + } | |
| 2828 | + | |
| 2829 | + to { | |
| 2830 | + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
| 2831 | + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
| 2832 | + opacity: 0; | |
| 2833 | + } | |
| 2834 | +} | |
| 2835 | +.animate__flipOutY { | |
| 2836 | + -webkit-animation-duration: calc(1s * 0.75); | |
| 2837 | + animation-duration: calc(1s * 0.75); | |
| 2838 | + -webkit-animation-duration: calc(var(--animate-duration) * 0.75); | |
| 2839 | + animation-duration: calc(var(--animate-duration) * 0.75); | |
| 2840 | + -webkit-backface-visibility: visible !important; | |
| 2841 | + backface-visibility: visible !important; | |
| 2842 | + -webkit-animation-name: flipOutY; | |
| 2843 | + animation-name: flipOutY; | |
| 2844 | +} | |
| 2845 | +/* Lightspeed */ | |
| 2846 | +@-webkit-keyframes lightSpeedInRight { | |
| 2847 | + from { | |
| 2848 | + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); | |
| 2849 | + transform: translate3d(100%, 0, 0) skewX(-30deg); | |
| 2850 | + opacity: 0; | |
| 2851 | + } | |
| 2852 | + | |
| 2853 | + 60% { | |
| 2854 | + -webkit-transform: skewX(20deg); | |
| 2855 | + transform: skewX(20deg); | |
| 2856 | + opacity: 1; | |
| 2857 | + } | |
| 2858 | + | |
| 2859 | + 80% { | |
| 2860 | + -webkit-transform: skewX(-5deg); | |
| 2861 | + transform: skewX(-5deg); | |
| 2862 | + } | |
| 2863 | + | |
| 2864 | + to { | |
| 2865 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2866 | + transform: translate3d(0, 0, 0); | |
| 2867 | + } | |
| 2868 | +} | |
| 2869 | +@keyframes lightSpeedInRight { | |
| 2870 | + from { | |
| 2871 | + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); | |
| 2872 | + transform: translate3d(100%, 0, 0) skewX(-30deg); | |
| 2873 | + opacity: 0; | |
| 2874 | + } | |
| 2875 | + | |
| 2876 | + 60% { | |
| 2877 | + -webkit-transform: skewX(20deg); | |
| 2878 | + transform: skewX(20deg); | |
| 2879 | + opacity: 1; | |
| 2880 | + } | |
| 2881 | + | |
| 2882 | + 80% { | |
| 2883 | + -webkit-transform: skewX(-5deg); | |
| 2884 | + transform: skewX(-5deg); | |
| 2885 | + } | |
| 2886 | + | |
| 2887 | + to { | |
| 2888 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2889 | + transform: translate3d(0, 0, 0); | |
| 2890 | + } | |
| 2891 | +} | |
| 2892 | +.animate__lightSpeedInRight { | |
| 2893 | + -webkit-animation-name: lightSpeedInRight; | |
| 2894 | + animation-name: lightSpeedInRight; | |
| 2895 | + -webkit-animation-timing-function: ease-out; | |
| 2896 | + animation-timing-function: ease-out; | |
| 2897 | +} | |
| 2898 | +@-webkit-keyframes lightSpeedInLeft { | |
| 2899 | + from { | |
| 2900 | + -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); | |
| 2901 | + transform: translate3d(-100%, 0, 0) skewX(30deg); | |
| 2902 | + opacity: 0; | |
| 2903 | + } | |
| 2904 | + | |
| 2905 | + 60% { | |
| 2906 | + -webkit-transform: skewX(-20deg); | |
| 2907 | + transform: skewX(-20deg); | |
| 2908 | + opacity: 1; | |
| 2909 | + } | |
| 2910 | + | |
| 2911 | + 80% { | |
| 2912 | + -webkit-transform: skewX(5deg); | |
| 2913 | + transform: skewX(5deg); | |
| 2914 | + } | |
| 2915 | + | |
| 2916 | + to { | |
| 2917 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2918 | + transform: translate3d(0, 0, 0); | |
| 2919 | + } | |
| 2920 | +} | |
| 2921 | +@keyframes lightSpeedInLeft { | |
| 2922 | + from { | |
| 2923 | + -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); | |
| 2924 | + transform: translate3d(-100%, 0, 0) skewX(30deg); | |
| 2925 | + opacity: 0; | |
| 2926 | + } | |
| 2927 | + | |
| 2928 | + 60% { | |
| 2929 | + -webkit-transform: skewX(-20deg); | |
| 2930 | + transform: skewX(-20deg); | |
| 2931 | + opacity: 1; | |
| 2932 | + } | |
| 2933 | + | |
| 2934 | + 80% { | |
| 2935 | + -webkit-transform: skewX(5deg); | |
| 2936 | + transform: skewX(5deg); | |
| 2937 | + } | |
| 2938 | + | |
| 2939 | + to { | |
| 2940 | + -webkit-transform: translate3d(0, 0, 0); | |
| 2941 | + transform: translate3d(0, 0, 0); | |
| 2942 | + } | |
| 2943 | +} | |
| 2944 | +.animate__lightSpeedInLeft { | |
| 2945 | + -webkit-animation-name: lightSpeedInLeft; | |
| 2946 | + animation-name: lightSpeedInLeft; | |
| 2947 | + -webkit-animation-timing-function: ease-out; | |
| 2948 | + animation-timing-function: ease-out; | |
| 2949 | +} | |
| 2950 | +@-webkit-keyframes lightSpeedOutRight { | |
| 2951 | + from { | |
| 2952 | + opacity: 1; | |
| 2953 | + } | |
| 2954 | + | |
| 2955 | + to { | |
| 2956 | + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); | |
| 2957 | + transform: translate3d(100%, 0, 0) skewX(30deg); | |
| 2958 | + opacity: 0; | |
| 2959 | + } | |
| 2960 | +} | |
| 2961 | +@keyframes lightSpeedOutRight { | |
| 2962 | + from { | |
| 2963 | + opacity: 1; | |
| 2964 | + } | |
| 2965 | + | |
| 2966 | + to { | |
| 2967 | + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); | |
| 2968 | + transform: translate3d(100%, 0, 0) skewX(30deg); | |
| 2969 | + opacity: 0; | |
| 2970 | + } | |
| 2971 | +} | |
| 2972 | +.animate__lightSpeedOutRight { | |
| 2973 | + -webkit-animation-name: lightSpeedOutRight; | |
| 2974 | + animation-name: lightSpeedOutRight; | |
| 2975 | + -webkit-animation-timing-function: ease-in; | |
| 2976 | + animation-timing-function: ease-in; | |
| 2977 | +} | |
| 2978 | +@-webkit-keyframes lightSpeedOutLeft { | |
| 2979 | + from { | |
| 2980 | + opacity: 1; | |
| 2981 | + } | |
| 2982 | + | |
| 2983 | + to { | |
| 2984 | + -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); | |
| 2985 | + transform: translate3d(-100%, 0, 0) skewX(-30deg); | |
| 2986 | + opacity: 0; | |
| 2987 | + } | |
| 2988 | +} | |
| 2989 | +@keyframes lightSpeedOutLeft { | |
| 2990 | + from { | |
| 2991 | + opacity: 1; | |
| 2992 | + } | |
| 2993 | + | |
| 2994 | + to { | |
| 2995 | + -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); | |
| 2996 | + transform: translate3d(-100%, 0, 0) skewX(-30deg); | |
| 2997 | + opacity: 0; | |
| 2998 | + } | |
| 2999 | +} | |
| 3000 | +.animate__lightSpeedOutLeft { | |
| 3001 | + -webkit-animation-name: lightSpeedOutLeft; | |
| 3002 | + animation-name: lightSpeedOutLeft; | |
| 3003 | + -webkit-animation-timing-function: ease-in; | |
| 3004 | + animation-timing-function: ease-in; | |
| 3005 | +} | |
| 3006 | +/* Rotating entrances */ | |
| 3007 | +@-webkit-keyframes rotateIn { | |
| 3008 | + from { | |
| 3009 | + -webkit-transform: rotate3d(0, 0, 1, -200deg); | |
| 3010 | + transform: rotate3d(0, 0, 1, -200deg); | |
| 3011 | + opacity: 0; | |
| 3012 | + } | |
| 3013 | + | |
| 3014 | + to { | |
| 3015 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3016 | + transform: translate3d(0, 0, 0); | |
| 3017 | + opacity: 1; | |
| 3018 | + } | |
| 3019 | +} | |
| 3020 | +@keyframes rotateIn { | |
| 3021 | + from { | |
| 3022 | + -webkit-transform: rotate3d(0, 0, 1, -200deg); | |
| 3023 | + transform: rotate3d(0, 0, 1, -200deg); | |
| 3024 | + opacity: 0; | |
| 3025 | + } | |
| 3026 | + | |
| 3027 | + to { | |
| 3028 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3029 | + transform: translate3d(0, 0, 0); | |
| 3030 | + opacity: 1; | |
| 3031 | + } | |
| 3032 | +} | |
| 3033 | +.animate__rotateIn { | |
| 3034 | + -webkit-animation-name: rotateIn; | |
| 3035 | + animation-name: rotateIn; | |
| 3036 | + -webkit-transform-origin: center; | |
| 3037 | + transform-origin: center; | |
| 3038 | +} | |
| 3039 | +@-webkit-keyframes rotateInDownLeft { | |
| 3040 | + from { | |
| 3041 | + -webkit-transform: rotate3d(0, 0, 1, -45deg); | |
| 3042 | + transform: rotate3d(0, 0, 1, -45deg); | |
| 3043 | + opacity: 0; | |
| 3044 | + } | |
| 3045 | + | |
| 3046 | + to { | |
| 3047 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3048 | + transform: translate3d(0, 0, 0); | |
| 3049 | + opacity: 1; | |
| 3050 | + } | |
| 3051 | +} | |
| 3052 | +@keyframes rotateInDownLeft { | |
| 3053 | + from { | |
| 3054 | + -webkit-transform: rotate3d(0, 0, 1, -45deg); | |
| 3055 | + transform: rotate3d(0, 0, 1, -45deg); | |
| 3056 | + opacity: 0; | |
| 3057 | + } | |
| 3058 | + | |
| 3059 | + to { | |
| 3060 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3061 | + transform: translate3d(0, 0, 0); | |
| 3062 | + opacity: 1; | |
| 3063 | + } | |
| 3064 | +} | |
| 3065 | +.animate__rotateInDownLeft { | |
| 3066 | + -webkit-animation-name: rotateInDownLeft; | |
| 3067 | + animation-name: rotateInDownLeft; | |
| 3068 | + -webkit-transform-origin: left bottom; | |
| 3069 | + transform-origin: left bottom; | |
| 3070 | +} | |
| 3071 | +@-webkit-keyframes rotateInDownRight { | |
| 3072 | + from { | |
| 3073 | + -webkit-transform: rotate3d(0, 0, 1, 45deg); | |
| 3074 | + transform: rotate3d(0, 0, 1, 45deg); | |
| 3075 | + opacity: 0; | |
| 3076 | + } | |
| 3077 | + | |
| 3078 | + to { | |
| 3079 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3080 | + transform: translate3d(0, 0, 0); | |
| 3081 | + opacity: 1; | |
| 3082 | + } | |
| 3083 | +} | |
| 3084 | +@keyframes rotateInDownRight { | |
| 3085 | + from { | |
| 3086 | + -webkit-transform: rotate3d(0, 0, 1, 45deg); | |
| 3087 | + transform: rotate3d(0, 0, 1, 45deg); | |
| 3088 | + opacity: 0; | |
| 3089 | + } | |
| 3090 | + | |
| 3091 | + to { | |
| 3092 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3093 | + transform: translate3d(0, 0, 0); | |
| 3094 | + opacity: 1; | |
| 3095 | + } | |
| 3096 | +} | |
| 3097 | +.animate__rotateInDownRight { | |
| 3098 | + -webkit-animation-name: rotateInDownRight; | |
| 3099 | + animation-name: rotateInDownRight; | |
| 3100 | + -webkit-transform-origin: right bottom; | |
| 3101 | + transform-origin: right bottom; | |
| 3102 | +} | |
| 3103 | +@-webkit-keyframes rotateInUpLeft { | |
| 3104 | + from { | |
| 3105 | + -webkit-transform: rotate3d(0, 0, 1, 45deg); | |
| 3106 | + transform: rotate3d(0, 0, 1, 45deg); | |
| 3107 | + opacity: 0; | |
| 3108 | + } | |
| 3109 | + | |
| 3110 | + to { | |
| 3111 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3112 | + transform: translate3d(0, 0, 0); | |
| 3113 | + opacity: 1; | |
| 3114 | + } | |
| 3115 | +} | |
| 3116 | +@keyframes rotateInUpLeft { | |
| 3117 | + from { | |
| 3118 | + -webkit-transform: rotate3d(0, 0, 1, 45deg); | |
| 3119 | + transform: rotate3d(0, 0, 1, 45deg); | |
| 3120 | + opacity: 0; | |
| 3121 | + } | |
| 3122 | + | |
| 3123 | + to { | |
| 3124 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3125 | + transform: translate3d(0, 0, 0); | |
| 3126 | + opacity: 1; | |
| 3127 | + } | |
| 3128 | +} | |
| 3129 | +.animate__rotateInUpLeft { | |
| 3130 | + -webkit-animation-name: rotateInUpLeft; | |
| 3131 | + animation-name: rotateInUpLeft; | |
| 3132 | + -webkit-transform-origin: left bottom; | |
| 3133 | + transform-origin: left bottom; | |
| 3134 | +} | |
| 3135 | +@-webkit-keyframes rotateInUpRight { | |
| 3136 | + from { | |
| 3137 | + -webkit-transform: rotate3d(0, 0, 1, -90deg); | |
| 3138 | + transform: rotate3d(0, 0, 1, -90deg); | |
| 3139 | + opacity: 0; | |
| 3140 | + } | |
| 3141 | + | |
| 3142 | + to { | |
| 3143 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3144 | + transform: translate3d(0, 0, 0); | |
| 3145 | + opacity: 1; | |
| 3146 | + } | |
| 3147 | +} | |
| 3148 | +@keyframes rotateInUpRight { | |
| 3149 | + from { | |
| 3150 | + -webkit-transform: rotate3d(0, 0, 1, -90deg); | |
| 3151 | + transform: rotate3d(0, 0, 1, -90deg); | |
| 3152 | + opacity: 0; | |
| 3153 | + } | |
| 3154 | + | |
| 3155 | + to { | |
| 3156 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3157 | + transform: translate3d(0, 0, 0); | |
| 3158 | + opacity: 1; | |
| 3159 | + } | |
| 3160 | +} | |
| 3161 | +.animate__rotateInUpRight { | |
| 3162 | + -webkit-animation-name: rotateInUpRight; | |
| 3163 | + animation-name: rotateInUpRight; | |
| 3164 | + -webkit-transform-origin: right bottom; | |
| 3165 | + transform-origin: right bottom; | |
| 3166 | +} | |
| 3167 | +/* Rotating exits */ | |
| 3168 | +@-webkit-keyframes rotateOut { | |
| 3169 | + from { | |
| 3170 | + opacity: 1; | |
| 3171 | + } | |
| 3172 | + | |
| 3173 | + to { | |
| 3174 | + -webkit-transform: rotate3d(0, 0, 1, 200deg); | |
| 3175 | + transform: rotate3d(0, 0, 1, 200deg); | |
| 3176 | + opacity: 0; | |
| 3177 | + } | |
| 3178 | +} | |
| 3179 | +@keyframes rotateOut { | |
| 3180 | + from { | |
| 3181 | + opacity: 1; | |
| 3182 | + } | |
| 3183 | + | |
| 3184 | + to { | |
| 3185 | + -webkit-transform: rotate3d(0, 0, 1, 200deg); | |
| 3186 | + transform: rotate3d(0, 0, 1, 200deg); | |
| 3187 | + opacity: 0; | |
| 3188 | + } | |
| 3189 | +} | |
| 3190 | +.animate__rotateOut { | |
| 3191 | + -webkit-animation-name: rotateOut; | |
| 3192 | + animation-name: rotateOut; | |
| 3193 | + -webkit-transform-origin: center; | |
| 3194 | + transform-origin: center; | |
| 3195 | +} | |
| 3196 | +@-webkit-keyframes rotateOutDownLeft { | |
| 3197 | + from { | |
| 3198 | + opacity: 1; | |
| 3199 | + } | |
| 3200 | + | |
| 3201 | + to { | |
| 3202 | + -webkit-transform: rotate3d(0, 0, 1, 45deg); | |
| 3203 | + transform: rotate3d(0, 0, 1, 45deg); | |
| 3204 | + opacity: 0; | |
| 3205 | + } | |
| 3206 | +} | |
| 3207 | +@keyframes rotateOutDownLeft { | |
| 3208 | + from { | |
| 3209 | + opacity: 1; | |
| 3210 | + } | |
| 3211 | + | |
| 3212 | + to { | |
| 3213 | + -webkit-transform: rotate3d(0, 0, 1, 45deg); | |
| 3214 | + transform: rotate3d(0, 0, 1, 45deg); | |
| 3215 | + opacity: 0; | |
| 3216 | + } | |
| 3217 | +} | |
| 3218 | +.animate__rotateOutDownLeft { | |
| 3219 | + -webkit-animation-name: rotateOutDownLeft; | |
| 3220 | + animation-name: rotateOutDownLeft; | |
| 3221 | + -webkit-transform-origin: left bottom; | |
| 3222 | + transform-origin: left bottom; | |
| 3223 | +} | |
| 3224 | +@-webkit-keyframes rotateOutDownRight { | |
| 3225 | + from { | |
| 3226 | + opacity: 1; | |
| 3227 | + } | |
| 3228 | + | |
| 3229 | + to { | |
| 3230 | + -webkit-transform: rotate3d(0, 0, 1, -45deg); | |
| 3231 | + transform: rotate3d(0, 0, 1, -45deg); | |
| 3232 | + opacity: 0; | |
| 3233 | + } | |
| 3234 | +} | |
| 3235 | +@keyframes rotateOutDownRight { | |
| 3236 | + from { | |
| 3237 | + opacity: 1; | |
| 3238 | + } | |
| 3239 | + | |
| 3240 | + to { | |
| 3241 | + -webkit-transform: rotate3d(0, 0, 1, -45deg); | |
| 3242 | + transform: rotate3d(0, 0, 1, -45deg); | |
| 3243 | + opacity: 0; | |
| 3244 | + } | |
| 3245 | +} | |
| 3246 | +.animate__rotateOutDownRight { | |
| 3247 | + -webkit-animation-name: rotateOutDownRight; | |
| 3248 | + animation-name: rotateOutDownRight; | |
| 3249 | + -webkit-transform-origin: right bottom; | |
| 3250 | + transform-origin: right bottom; | |
| 3251 | +} | |
| 3252 | +@-webkit-keyframes rotateOutUpLeft { | |
| 3253 | + from { | |
| 3254 | + opacity: 1; | |
| 3255 | + } | |
| 3256 | + | |
| 3257 | + to { | |
| 3258 | + -webkit-transform: rotate3d(0, 0, 1, -45deg); | |
| 3259 | + transform: rotate3d(0, 0, 1, -45deg); | |
| 3260 | + opacity: 0; | |
| 3261 | + } | |
| 3262 | +} | |
| 3263 | +@keyframes rotateOutUpLeft { | |
| 3264 | + from { | |
| 3265 | + opacity: 1; | |
| 3266 | + } | |
| 3267 | + | |
| 3268 | + to { | |
| 3269 | + -webkit-transform: rotate3d(0, 0, 1, -45deg); | |
| 3270 | + transform: rotate3d(0, 0, 1, -45deg); | |
| 3271 | + opacity: 0; | |
| 3272 | + } | |
| 3273 | +} | |
| 3274 | +.animate__rotateOutUpLeft { | |
| 3275 | + -webkit-animation-name: rotateOutUpLeft; | |
| 3276 | + animation-name: rotateOutUpLeft; | |
| 3277 | + -webkit-transform-origin: left bottom; | |
| 3278 | + transform-origin: left bottom; | |
| 3279 | +} | |
| 3280 | +@-webkit-keyframes rotateOutUpRight { | |
| 3281 | + from { | |
| 3282 | + opacity: 1; | |
| 3283 | + } | |
| 3284 | + | |
| 3285 | + to { | |
| 3286 | + -webkit-transform: rotate3d(0, 0, 1, 90deg); | |
| 3287 | + transform: rotate3d(0, 0, 1, 90deg); | |
| 3288 | + opacity: 0; | |
| 3289 | + } | |
| 3290 | +} | |
| 3291 | +@keyframes rotateOutUpRight { | |
| 3292 | + from { | |
| 3293 | + opacity: 1; | |
| 3294 | + } | |
| 3295 | + | |
| 3296 | + to { | |
| 3297 | + -webkit-transform: rotate3d(0, 0, 1, 90deg); | |
| 3298 | + transform: rotate3d(0, 0, 1, 90deg); | |
| 3299 | + opacity: 0; | |
| 3300 | + } | |
| 3301 | +} | |
| 3302 | +.animate__rotateOutUpRight { | |
| 3303 | + -webkit-animation-name: rotateOutUpRight; | |
| 3304 | + animation-name: rotateOutUpRight; | |
| 3305 | + -webkit-transform-origin: right bottom; | |
| 3306 | + transform-origin: right bottom; | |
| 3307 | +} | |
| 3308 | +/* Specials */ | |
| 3309 | +@-webkit-keyframes hinge { | |
| 3310 | + 0% { | |
| 3311 | + -webkit-animation-timing-function: ease-in-out; | |
| 3312 | + animation-timing-function: ease-in-out; | |
| 3313 | + } | |
| 3314 | + | |
| 3315 | + 20%, | |
| 3316 | + 60% { | |
| 3317 | + -webkit-transform: rotate3d(0, 0, 1, 80deg); | |
| 3318 | + transform: rotate3d(0, 0, 1, 80deg); | |
| 3319 | + -webkit-animation-timing-function: ease-in-out; | |
| 3320 | + animation-timing-function: ease-in-out; | |
| 3321 | + } | |
| 3322 | + | |
| 3323 | + 40%, | |
| 3324 | + 80% { | |
| 3325 | + -webkit-transform: rotate3d(0, 0, 1, 60deg); | |
| 3326 | + transform: rotate3d(0, 0, 1, 60deg); | |
| 3327 | + -webkit-animation-timing-function: ease-in-out; | |
| 3328 | + animation-timing-function: ease-in-out; | |
| 3329 | + opacity: 1; | |
| 3330 | + } | |
| 3331 | + | |
| 3332 | + to { | |
| 3333 | + -webkit-transform: translate3d(0, 700px, 0); | |
| 3334 | + transform: translate3d(0, 700px, 0); | |
| 3335 | + opacity: 0; | |
| 3336 | + } | |
| 3337 | +} | |
| 3338 | +@keyframes hinge { | |
| 3339 | + 0% { | |
| 3340 | + -webkit-animation-timing-function: ease-in-out; | |
| 3341 | + animation-timing-function: ease-in-out; | |
| 3342 | + } | |
| 3343 | + | |
| 3344 | + 20%, | |
| 3345 | + 60% { | |
| 3346 | + -webkit-transform: rotate3d(0, 0, 1, 80deg); | |
| 3347 | + transform: rotate3d(0, 0, 1, 80deg); | |
| 3348 | + -webkit-animation-timing-function: ease-in-out; | |
| 3349 | + animation-timing-function: ease-in-out; | |
| 3350 | + } | |
| 3351 | + | |
| 3352 | + 40%, | |
| 3353 | + 80% { | |
| 3354 | + -webkit-transform: rotate3d(0, 0, 1, 60deg); | |
| 3355 | + transform: rotate3d(0, 0, 1, 60deg); | |
| 3356 | + -webkit-animation-timing-function: ease-in-out; | |
| 3357 | + animation-timing-function: ease-in-out; | |
| 3358 | + opacity: 1; | |
| 3359 | + } | |
| 3360 | + | |
| 3361 | + to { | |
| 3362 | + -webkit-transform: translate3d(0, 700px, 0); | |
| 3363 | + transform: translate3d(0, 700px, 0); | |
| 3364 | + opacity: 0; | |
| 3365 | + } | |
| 3366 | +} | |
| 3367 | +.animate__hinge { | |
| 3368 | + -webkit-animation-duration: calc(1s * 2); | |
| 3369 | + animation-duration: calc(1s * 2); | |
| 3370 | + -webkit-animation-duration: calc(var(--animate-duration) * 2); | |
| 3371 | + animation-duration: calc(var(--animate-duration) * 2); | |
| 3372 | + -webkit-animation-name: hinge; | |
| 3373 | + animation-name: hinge; | |
| 3374 | + -webkit-transform-origin: top left; | |
| 3375 | + transform-origin: top left; | |
| 3376 | +} | |
| 3377 | +@-webkit-keyframes jackInTheBox { | |
| 3378 | + from { | |
| 3379 | + opacity: 0; | |
| 3380 | + -webkit-transform: scale(0.1) rotate(30deg); | |
| 3381 | + transform: scale(0.1) rotate(30deg); | |
| 3382 | + -webkit-transform-origin: center bottom; | |
| 3383 | + transform-origin: center bottom; | |
| 3384 | + } | |
| 3385 | + | |
| 3386 | + 50% { | |
| 3387 | + -webkit-transform: rotate(-10deg); | |
| 3388 | + transform: rotate(-10deg); | |
| 3389 | + } | |
| 3390 | + | |
| 3391 | + 70% { | |
| 3392 | + -webkit-transform: rotate(3deg); | |
| 3393 | + transform: rotate(3deg); | |
| 3394 | + } | |
| 3395 | + | |
| 3396 | + to { | |
| 3397 | + opacity: 1; | |
| 3398 | + -webkit-transform: scale(1); | |
| 3399 | + transform: scale(1); | |
| 3400 | + } | |
| 3401 | +} | |
| 3402 | +@keyframes jackInTheBox { | |
| 3403 | + from { | |
| 3404 | + opacity: 0; | |
| 3405 | + -webkit-transform: scale(0.1) rotate(30deg); | |
| 3406 | + transform: scale(0.1) rotate(30deg); | |
| 3407 | + -webkit-transform-origin: center bottom; | |
| 3408 | + transform-origin: center bottom; | |
| 3409 | + } | |
| 3410 | + | |
| 3411 | + 50% { | |
| 3412 | + -webkit-transform: rotate(-10deg); | |
| 3413 | + transform: rotate(-10deg); | |
| 3414 | + } | |
| 3415 | + | |
| 3416 | + 70% { | |
| 3417 | + -webkit-transform: rotate(3deg); | |
| 3418 | + transform: rotate(3deg); | |
| 3419 | + } | |
| 3420 | + | |
| 3421 | + to { | |
| 3422 | + opacity: 1; | |
| 3423 | + -webkit-transform: scale(1); | |
| 3424 | + transform: scale(1); | |
| 3425 | + } | |
| 3426 | +} | |
| 3427 | +.animate__jackInTheBox { | |
| 3428 | + -webkit-animation-name: jackInTheBox; | |
| 3429 | + animation-name: jackInTheBox; | |
| 3430 | +} | |
| 3431 | +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
| 3432 | +@-webkit-keyframes rollIn { | |
| 3433 | + from { | |
| 3434 | + opacity: 0; | |
| 3435 | + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
| 3436 | + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
| 3437 | + } | |
| 3438 | + | |
| 3439 | + to { | |
| 3440 | + opacity: 1; | |
| 3441 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3442 | + transform: translate3d(0, 0, 0); | |
| 3443 | + } | |
| 3444 | +} | |
| 3445 | +@keyframes rollIn { | |
| 3446 | + from { | |
| 3447 | + opacity: 0; | |
| 3448 | + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
| 3449 | + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
| 3450 | + } | |
| 3451 | + | |
| 3452 | + to { | |
| 3453 | + opacity: 1; | |
| 3454 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3455 | + transform: translate3d(0, 0, 0); | |
| 3456 | + } | |
| 3457 | +} | |
| 3458 | +.animate__rollIn { | |
| 3459 | + -webkit-animation-name: rollIn; | |
| 3460 | + animation-name: rollIn; | |
| 3461 | +} | |
| 3462 | +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
| 3463 | +@-webkit-keyframes rollOut { | |
| 3464 | + from { | |
| 3465 | + opacity: 1; | |
| 3466 | + } | |
| 3467 | + | |
| 3468 | + to { | |
| 3469 | + opacity: 0; | |
| 3470 | + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
| 3471 | + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
| 3472 | + } | |
| 3473 | +} | |
| 3474 | +@keyframes rollOut { | |
| 3475 | + from { | |
| 3476 | + opacity: 1; | |
| 3477 | + } | |
| 3478 | + | |
| 3479 | + to { | |
| 3480 | + opacity: 0; | |
| 3481 | + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
| 3482 | + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
| 3483 | + } | |
| 3484 | +} | |
| 3485 | +.animate__rollOut { | |
| 3486 | + -webkit-animation-name: rollOut; | |
| 3487 | + animation-name: rollOut; | |
| 3488 | +} | |
| 3489 | +/* Zooming entrances */ | |
| 3490 | +@-webkit-keyframes zoomIn { | |
| 3491 | + from { | |
| 3492 | + opacity: 0; | |
| 3493 | + -webkit-transform: scale3d(0.3, 0.3, 0.3); | |
| 3494 | + transform: scale3d(0.3, 0.3, 0.3); | |
| 3495 | + } | |
| 3496 | + | |
| 3497 | + 50% { | |
| 3498 | + opacity: 1; | |
| 3499 | + } | |
| 3500 | +} | |
| 3501 | +@keyframes zoomIn { | |
| 3502 | + from { | |
| 3503 | + opacity: 0; | |
| 3504 | + -webkit-transform: scale3d(0.3, 0.3, 0.3); | |
| 3505 | + transform: scale3d(0.3, 0.3, 0.3); | |
| 3506 | + } | |
| 3507 | + | |
| 3508 | + 50% { | |
| 3509 | + opacity: 1; | |
| 3510 | + } | |
| 3511 | +} | |
| 3512 | +.animate__zoomIn { | |
| 3513 | + -webkit-animation-name: zoomIn; | |
| 3514 | + animation-name: zoomIn; | |
| 3515 | +} | |
| 3516 | +@-webkit-keyframes zoomInDown { | |
| 3517 | + from { | |
| 3518 | + opacity: 0; | |
| 3519 | + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); | |
| 3520 | + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); | |
| 3521 | + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3522 | + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3523 | + } | |
| 3524 | + | |
| 3525 | + 60% { | |
| 3526 | + opacity: 1; | |
| 3527 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
| 3528 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
| 3529 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3530 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3531 | + } | |
| 3532 | +} | |
| 3533 | +@keyframes zoomInDown { | |
| 3534 | + from { | |
| 3535 | + opacity: 0; | |
| 3536 | + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); | |
| 3537 | + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); | |
| 3538 | + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3539 | + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3540 | + } | |
| 3541 | + | |
| 3542 | + 60% { | |
| 3543 | + opacity: 1; | |
| 3544 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
| 3545 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
| 3546 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3547 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3548 | + } | |
| 3549 | +} | |
| 3550 | +.animate__zoomInDown { | |
| 3551 | + -webkit-animation-name: zoomInDown; | |
| 3552 | + animation-name: zoomInDown; | |
| 3553 | +} | |
| 3554 | +@-webkit-keyframes zoomInLeft { | |
| 3555 | + from { | |
| 3556 | + opacity: 0; | |
| 3557 | + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); | |
| 3558 | + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); | |
| 3559 | + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3560 | + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3561 | + } | |
| 3562 | + | |
| 3563 | + 60% { | |
| 3564 | + opacity: 1; | |
| 3565 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); | |
| 3566 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); | |
| 3567 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3568 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3569 | + } | |
| 3570 | +} | |
| 3571 | +@keyframes zoomInLeft { | |
| 3572 | + from { | |
| 3573 | + opacity: 0; | |
| 3574 | + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); | |
| 3575 | + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); | |
| 3576 | + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3577 | + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3578 | + } | |
| 3579 | + | |
| 3580 | + 60% { | |
| 3581 | + opacity: 1; | |
| 3582 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); | |
| 3583 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); | |
| 3584 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3585 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3586 | + } | |
| 3587 | +} | |
| 3588 | +.animate__zoomInLeft { | |
| 3589 | + -webkit-animation-name: zoomInLeft; | |
| 3590 | + animation-name: zoomInLeft; | |
| 3591 | +} | |
| 3592 | +@-webkit-keyframes zoomInRight { | |
| 3593 | + from { | |
| 3594 | + opacity: 0; | |
| 3595 | + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); | |
| 3596 | + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); | |
| 3597 | + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3598 | + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3599 | + } | |
| 3600 | + | |
| 3601 | + 60% { | |
| 3602 | + opacity: 1; | |
| 3603 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); | |
| 3604 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); | |
| 3605 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3606 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3607 | + } | |
| 3608 | +} | |
| 3609 | +@keyframes zoomInRight { | |
| 3610 | + from { | |
| 3611 | + opacity: 0; | |
| 3612 | + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); | |
| 3613 | + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); | |
| 3614 | + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3615 | + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3616 | + } | |
| 3617 | + | |
| 3618 | + 60% { | |
| 3619 | + opacity: 1; | |
| 3620 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); | |
| 3621 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); | |
| 3622 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3623 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3624 | + } | |
| 3625 | +} | |
| 3626 | +.animate__zoomInRight { | |
| 3627 | + -webkit-animation-name: zoomInRight; | |
| 3628 | + animation-name: zoomInRight; | |
| 3629 | +} | |
| 3630 | +@-webkit-keyframes zoomInUp { | |
| 3631 | + from { | |
| 3632 | + opacity: 0; | |
| 3633 | + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); | |
| 3634 | + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); | |
| 3635 | + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3636 | + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3637 | + } | |
| 3638 | + | |
| 3639 | + 60% { | |
| 3640 | + opacity: 1; | |
| 3641 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
| 3642 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
| 3643 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3644 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3645 | + } | |
| 3646 | +} | |
| 3647 | +@keyframes zoomInUp { | |
| 3648 | + from { | |
| 3649 | + opacity: 0; | |
| 3650 | + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); | |
| 3651 | + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); | |
| 3652 | + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3653 | + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3654 | + } | |
| 3655 | + | |
| 3656 | + 60% { | |
| 3657 | + opacity: 1; | |
| 3658 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
| 3659 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
| 3660 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3661 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3662 | + } | |
| 3663 | +} | |
| 3664 | +.animate__zoomInUp { | |
| 3665 | + -webkit-animation-name: zoomInUp; | |
| 3666 | + animation-name: zoomInUp; | |
| 3667 | +} | |
| 3668 | +/* Zooming exits */ | |
| 3669 | +@-webkit-keyframes zoomOut { | |
| 3670 | + from { | |
| 3671 | + opacity: 1; | |
| 3672 | + } | |
| 3673 | + | |
| 3674 | + 50% { | |
| 3675 | + opacity: 0; | |
| 3676 | + -webkit-transform: scale3d(0.3, 0.3, 0.3); | |
| 3677 | + transform: scale3d(0.3, 0.3, 0.3); | |
| 3678 | + } | |
| 3679 | + | |
| 3680 | + to { | |
| 3681 | + opacity: 0; | |
| 3682 | + } | |
| 3683 | +} | |
| 3684 | +@keyframes zoomOut { | |
| 3685 | + from { | |
| 3686 | + opacity: 1; | |
| 3687 | + } | |
| 3688 | + | |
| 3689 | + 50% { | |
| 3690 | + opacity: 0; | |
| 3691 | + -webkit-transform: scale3d(0.3, 0.3, 0.3); | |
| 3692 | + transform: scale3d(0.3, 0.3, 0.3); | |
| 3693 | + } | |
| 3694 | + | |
| 3695 | + to { | |
| 3696 | + opacity: 0; | |
| 3697 | + } | |
| 3698 | +} | |
| 3699 | +.animate__zoomOut { | |
| 3700 | + -webkit-animation-name: zoomOut; | |
| 3701 | + animation-name: zoomOut; | |
| 3702 | +} | |
| 3703 | +@-webkit-keyframes zoomOutDown { | |
| 3704 | + 40% { | |
| 3705 | + opacity: 1; | |
| 3706 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
| 3707 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
| 3708 | + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3709 | + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3710 | + } | |
| 3711 | + | |
| 3712 | + to { | |
| 3713 | + opacity: 0; | |
| 3714 | + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); | |
| 3715 | + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); | |
| 3716 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3717 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3718 | + } | |
| 3719 | +} | |
| 3720 | +@keyframes zoomOutDown { | |
| 3721 | + 40% { | |
| 3722 | + opacity: 1; | |
| 3723 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
| 3724 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
| 3725 | + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3726 | + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3727 | + } | |
| 3728 | + | |
| 3729 | + to { | |
| 3730 | + opacity: 0; | |
| 3731 | + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); | |
| 3732 | + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); | |
| 3733 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3734 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3735 | + } | |
| 3736 | +} | |
| 3737 | +.animate__zoomOutDown { | |
| 3738 | + -webkit-animation-name: zoomOutDown; | |
| 3739 | + animation-name: zoomOutDown; | |
| 3740 | + -webkit-transform-origin: center bottom; | |
| 3741 | + transform-origin: center bottom; | |
| 3742 | +} | |
| 3743 | +@-webkit-keyframes zoomOutLeft { | |
| 3744 | + 40% { | |
| 3745 | + opacity: 1; | |
| 3746 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); | |
| 3747 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); | |
| 3748 | + } | |
| 3749 | + | |
| 3750 | + to { | |
| 3751 | + opacity: 0; | |
| 3752 | + -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); | |
| 3753 | + transform: scale(0.1) translate3d(-2000px, 0, 0); | |
| 3754 | + } | |
| 3755 | +} | |
| 3756 | +@keyframes zoomOutLeft { | |
| 3757 | + 40% { | |
| 3758 | + opacity: 1; | |
| 3759 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); | |
| 3760 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); | |
| 3761 | + } | |
| 3762 | + | |
| 3763 | + to { | |
| 3764 | + opacity: 0; | |
| 3765 | + -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); | |
| 3766 | + transform: scale(0.1) translate3d(-2000px, 0, 0); | |
| 3767 | + } | |
| 3768 | +} | |
| 3769 | +.animate__zoomOutLeft { | |
| 3770 | + -webkit-animation-name: zoomOutLeft; | |
| 3771 | + animation-name: zoomOutLeft; | |
| 3772 | + -webkit-transform-origin: left center; | |
| 3773 | + transform-origin: left center; | |
| 3774 | +} | |
| 3775 | +@-webkit-keyframes zoomOutRight { | |
| 3776 | + 40% { | |
| 3777 | + opacity: 1; | |
| 3778 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); | |
| 3779 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); | |
| 3780 | + } | |
| 3781 | + | |
| 3782 | + to { | |
| 3783 | + opacity: 0; | |
| 3784 | + -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); | |
| 3785 | + transform: scale(0.1) translate3d(2000px, 0, 0); | |
| 3786 | + } | |
| 3787 | +} | |
| 3788 | +@keyframes zoomOutRight { | |
| 3789 | + 40% { | |
| 3790 | + opacity: 1; | |
| 3791 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); | |
| 3792 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); | |
| 3793 | + } | |
| 3794 | + | |
| 3795 | + to { | |
| 3796 | + opacity: 0; | |
| 3797 | + -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); | |
| 3798 | + transform: scale(0.1) translate3d(2000px, 0, 0); | |
| 3799 | + } | |
| 3800 | +} | |
| 3801 | +.animate__zoomOutRight { | |
| 3802 | + -webkit-animation-name: zoomOutRight; | |
| 3803 | + animation-name: zoomOutRight; | |
| 3804 | + -webkit-transform-origin: right center; | |
| 3805 | + transform-origin: right center; | |
| 3806 | +} | |
| 3807 | +@-webkit-keyframes zoomOutUp { | |
| 3808 | + 40% { | |
| 3809 | + opacity: 1; | |
| 3810 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
| 3811 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
| 3812 | + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3813 | + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3814 | + } | |
| 3815 | + | |
| 3816 | + to { | |
| 3817 | + opacity: 0; | |
| 3818 | + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); | |
| 3819 | + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); | |
| 3820 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3821 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3822 | + } | |
| 3823 | +} | |
| 3824 | +@keyframes zoomOutUp { | |
| 3825 | + 40% { | |
| 3826 | + opacity: 1; | |
| 3827 | + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
| 3828 | + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
| 3829 | + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3830 | + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
| 3831 | + } | |
| 3832 | + | |
| 3833 | + to { | |
| 3834 | + opacity: 0; | |
| 3835 | + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); | |
| 3836 | + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); | |
| 3837 | + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3838 | + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
| 3839 | + } | |
| 3840 | +} | |
| 3841 | +.animate__zoomOutUp { | |
| 3842 | + -webkit-animation-name: zoomOutUp; | |
| 3843 | + animation-name: zoomOutUp; | |
| 3844 | + -webkit-transform-origin: center bottom; | |
| 3845 | + transform-origin: center bottom; | |
| 3846 | +} | |
| 3847 | +/* Sliding entrances */ | |
| 3848 | +@-webkit-keyframes slideInDown { | |
| 3849 | + from { | |
| 3850 | + -webkit-transform: translate3d(0, -100%, 0); | |
| 3851 | + transform: translate3d(0, -100%, 0); | |
| 3852 | + visibility: visible; | |
| 3853 | + } | |
| 3854 | + | |
| 3855 | + to { | |
| 3856 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3857 | + transform: translate3d(0, 0, 0); | |
| 3858 | + } | |
| 3859 | +} | |
| 3860 | +@keyframes slideInDown { | |
| 3861 | + from { | |
| 3862 | + -webkit-transform: translate3d(0, -100%, 0); | |
| 3863 | + transform: translate3d(0, -100%, 0); | |
| 3864 | + visibility: visible; | |
| 3865 | + } | |
| 3866 | + | |
| 3867 | + to { | |
| 3868 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3869 | + transform: translate3d(0, 0, 0); | |
| 3870 | + } | |
| 3871 | +} | |
| 3872 | +.animate__slideInDown { | |
| 3873 | + -webkit-animation-name: slideInDown; | |
| 3874 | + animation-name: slideInDown; | |
| 3875 | +} | |
| 3876 | +@-webkit-keyframes slideInLeft { | |
| 3877 | + from { | |
| 3878 | + -webkit-transform: translate3d(-100%, 0, 0); | |
| 3879 | + transform: translate3d(-100%, 0, 0); | |
| 3880 | + visibility: visible; | |
| 3881 | + } | |
| 3882 | + | |
| 3883 | + to { | |
| 3884 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3885 | + transform: translate3d(0, 0, 0); | |
| 3886 | + } | |
| 3887 | +} | |
| 3888 | +@keyframes slideInLeft { | |
| 3889 | + from { | |
| 3890 | + -webkit-transform: translate3d(-100%, 0, 0); | |
| 3891 | + transform: translate3d(-100%, 0, 0); | |
| 3892 | + visibility: visible; | |
| 3893 | + } | |
| 3894 | + | |
| 3895 | + to { | |
| 3896 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3897 | + transform: translate3d(0, 0, 0); | |
| 3898 | + } | |
| 3899 | +} | |
| 3900 | +.animate__slideInLeft { | |
| 3901 | + -webkit-animation-name: slideInLeft; | |
| 3902 | + animation-name: slideInLeft; | |
| 3903 | +} | |
| 3904 | +@-webkit-keyframes slideInRight { | |
| 3905 | + from { | |
| 3906 | + -webkit-transform: translate3d(100%, 0, 0); | |
| 3907 | + transform: translate3d(100%, 0, 0); | |
| 3908 | + visibility: visible; | |
| 3909 | + } | |
| 3910 | + | |
| 3911 | + to { | |
| 3912 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3913 | + transform: translate3d(0, 0, 0); | |
| 3914 | + } | |
| 3915 | +} | |
| 3916 | +@keyframes slideInRight { | |
| 3917 | + from { | |
| 3918 | + -webkit-transform: translate3d(100%, 0, 0); | |
| 3919 | + transform: translate3d(100%, 0, 0); | |
| 3920 | + visibility: visible; | |
| 3921 | + } | |
| 3922 | + | |
| 3923 | + to { | |
| 3924 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3925 | + transform: translate3d(0, 0, 0); | |
| 3926 | + } | |
| 3927 | +} | |
| 3928 | +.animate__slideInRight { | |
| 3929 | + -webkit-animation-name: slideInRight; | |
| 3930 | + animation-name: slideInRight; | |
| 3931 | +} | |
| 3932 | +@-webkit-keyframes slideInUp { | |
| 3933 | + from { | |
| 3934 | + -webkit-transform: translate3d(0, 100%, 0); | |
| 3935 | + transform: translate3d(0, 100%, 0); | |
| 3936 | + visibility: visible; | |
| 3937 | + } | |
| 3938 | + | |
| 3939 | + to { | |
| 3940 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3941 | + transform: translate3d(0, 0, 0); | |
| 3942 | + } | |
| 3943 | +} | |
| 3944 | +@keyframes slideInUp { | |
| 3945 | + from { | |
| 3946 | + -webkit-transform: translate3d(0, 100%, 0); | |
| 3947 | + transform: translate3d(0, 100%, 0); | |
| 3948 | + visibility: visible; | |
| 3949 | + } | |
| 3950 | + | |
| 3951 | + to { | |
| 3952 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3953 | + transform: translate3d(0, 0, 0); | |
| 3954 | + } | |
| 3955 | +} | |
| 3956 | +.animate__slideInUp { | |
| 3957 | + -webkit-animation-name: slideInUp; | |
| 3958 | + animation-name: slideInUp; | |
| 3959 | +} | |
| 3960 | +/* Sliding exits */ | |
| 3961 | +@-webkit-keyframes slideOutDown { | |
| 3962 | + from { | |
| 3963 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3964 | + transform: translate3d(0, 0, 0); | |
| 3965 | + } | |
| 3966 | + | |
| 3967 | + to { | |
| 3968 | + visibility: hidden; | |
| 3969 | + -webkit-transform: translate3d(0, 100%, 0); | |
| 3970 | + transform: translate3d(0, 100%, 0); | |
| 3971 | + } | |
| 3972 | +} | |
| 3973 | +@keyframes slideOutDown { | |
| 3974 | + from { | |
| 3975 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3976 | + transform: translate3d(0, 0, 0); | |
| 3977 | + } | |
| 3978 | + | |
| 3979 | + to { | |
| 3980 | + visibility: hidden; | |
| 3981 | + -webkit-transform: translate3d(0, 100%, 0); | |
| 3982 | + transform: translate3d(0, 100%, 0); | |
| 3983 | + } | |
| 3984 | +} | |
| 3985 | +.animate__slideOutDown { | |
| 3986 | + -webkit-animation-name: slideOutDown; | |
| 3987 | + animation-name: slideOutDown; | |
| 3988 | +} | |
| 3989 | +@-webkit-keyframes slideOutLeft { | |
| 3990 | + from { | |
| 3991 | + -webkit-transform: translate3d(0, 0, 0); | |
| 3992 | + transform: translate3d(0, 0, 0); | |
| 3993 | + } | |
| 3994 | + | |
| 3995 | + to { | |
| 3996 | + visibility: hidden; | |
| 3997 | + -webkit-transform: translate3d(-100%, 0, 0); | |
| 3998 | + transform: translate3d(-100%, 0, 0); | |
| 3999 | + } | |
| 4000 | +} | |
| 4001 | +@keyframes slideOutLeft { | |
| 4002 | + from { | |
| 4003 | + -webkit-transform: translate3d(0, 0, 0); | |
| 4004 | + transform: translate3d(0, 0, 0); | |
| 4005 | + } | |
| 4006 | + | |
| 4007 | + to { | |
| 4008 | + visibility: hidden; | |
| 4009 | + -webkit-transform: translate3d(-100%, 0, 0); | |
| 4010 | + transform: translate3d(-100%, 0, 0); | |
| 4011 | + } | |
| 4012 | +} | |
| 4013 | +.animate__slideOutLeft { | |
| 4014 | + -webkit-animation-name: slideOutLeft; | |
| 4015 | + animation-name: slideOutLeft; | |
| 4016 | +} | |
| 4017 | +@-webkit-keyframes slideOutRight { | |
| 4018 | + from { | |
| 4019 | + -webkit-transform: translate3d(0, 0, 0); | |
| 4020 | + transform: translate3d(0, 0, 0); | |
| 4021 | + } | |
| 4022 | + | |
| 4023 | + to { | |
| 4024 | + visibility: hidden; | |
| 4025 | + -webkit-transform: translate3d(100%, 0, 0); | |
| 4026 | + transform: translate3d(100%, 0, 0); | |
| 4027 | + } | |
| 4028 | +} | |
| 4029 | +@keyframes slideOutRight { | |
| 4030 | + from { | |
| 4031 | + -webkit-transform: translate3d(0, 0, 0); | |
| 4032 | + transform: translate3d(0, 0, 0); | |
| 4033 | + } | |
| 4034 | + | |
| 4035 | + to { | |
| 4036 | + visibility: hidden; | |
| 4037 | + -webkit-transform: translate3d(100%, 0, 0); | |
| 4038 | + transform: translate3d(100%, 0, 0); | |
| 4039 | + } | |
| 4040 | +} | |
| 4041 | +.animate__slideOutRight { | |
| 4042 | + -webkit-animation-name: slideOutRight; | |
| 4043 | + animation-name: slideOutRight; | |
| 4044 | +} | |
| 4045 | +@-webkit-keyframes slideOutUp { | |
| 4046 | + from { | |
| 4047 | + -webkit-transform: translate3d(0, 0, 0); | |
| 4048 | + transform: translate3d(0, 0, 0); | |
| 4049 | + } | |
| 4050 | + | |
| 4051 | + to { | |
| 4052 | + visibility: hidden; | |
| 4053 | + -webkit-transform: translate3d(0, -100%, 0); | |
| 4054 | + transform: translate3d(0, -100%, 0); | |
| 4055 | + } | |
| 4056 | +} | |
| 4057 | +@keyframes slideOutUp { | |
| 4058 | + from { | |
| 4059 | + -webkit-transform: translate3d(0, 0, 0); | |
| 4060 | + transform: translate3d(0, 0, 0); | |
| 4061 | + } | |
| 4062 | + | |
| 4063 | + to { | |
| 4064 | + visibility: hidden; | |
| 4065 | + -webkit-transform: translate3d(0, -100%, 0); | |
| 4066 | + transform: translate3d(0, -100%, 0); | |
| 4067 | + } | |
| 4068 | +} | |
| 4069 | +.animate__slideOutUp { | |
| 4070 | + -webkit-animation-name: slideOutUp; | |
| 4071 | + animation-name: slideOutUp; | |
| 4072 | +} |
+++ resources/front/site/SITE_00000/css/common/vendors/animate.min.css
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/common/vendors/swiper-bundle.css
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/common/vendors/swiper-bundle.min.css
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/common/vendors/tagify.css
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/common/viewer/_colouredPenciles.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/common/viewer/_cont.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/common/viewer/_viewer.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/custom/abstracts/_mixins.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/custom/abstracts/_theme.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/custom/abstracts/_variables.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/custom/component/_component.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/custom/component/_icon.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/custom/layout/_layout.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/custom/page/_hwa.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/custom/page/_main.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/custom/page/_member.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/custom/page/_sol.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/custom/page/_sub.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/style.css
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/style.css.map
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/style.min.css
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/style.min.css.map
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/style.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/styleGuide.css
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/styleGuide.css.map
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/styleGuide.min.css
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/styleGuide.min.css.map
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/css/styleGuide.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/event/crossword/css/style.css
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/event/crossword/css/style.css.map
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/event/crossword/css/style.min.css
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/event/crossword/css/style.min.css.map
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/event/crossword/css/style.scss
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/event/crossword/images/bg-info.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/event/crossword/images/logo.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/event/crossword/images/puzzle-obj.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/event/crossword/js/crosswordPuzzle.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/event/crossword/js/temp/answer.json
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/event/crossword/js/temp/data.json
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/btn-float/btn-float-chatbot.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/btn-float/btn-float-control.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/btn-float/btn-float-top.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/arr.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/bg-schbox.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/bg_viewer_cover.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/btn_star.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/ico16x16.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/ico24x24.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/ico_file.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/ico_new.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/ico_ox.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/ico_painter.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/ico_painter_bar.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/ico_q_check.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img-sch-bg.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img-thumb-book-none.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img-thumb-class-none.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img_caution.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img_check.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img_confirm.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img_cont_none.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img_eraser.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img_error.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img_file_block.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img_file_check.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img_notice.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img_painter.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img_robot.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img_user.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/img_warning.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/loading-layer.gif
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/common/common/loading.gif
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/common/common/loading.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/sel-arr-lg-wh.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/sel_arr.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/sel_lnb.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/common/txt_none.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-1.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-10.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-11.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-12.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-13.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-14.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-15.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-16.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-17.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-18.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-19.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-2.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-20.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-21.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-22.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-23.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-24.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-25.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-26.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-27.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-28.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-29.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-3.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-30.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-4.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-5.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-6.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-7.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-8.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-9.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-classhome-1.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-classhome-2.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-classhome-3.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-classhome-4.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-classhome-5.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-classlist-1.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-classlist-2.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-classlist-3.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-cmt-1.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-cmt-2.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-cmt-3.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-cmt-4.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-cmt-5.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-cmt-6.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-exp-1.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-exp-2.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-exp-3.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-exp-4.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-exp-5.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-exp-6.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-exp-7.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-hmwrk-1.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-hmwrk-2.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-hmwrk-3.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-hmwrk-4.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-home-1.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-home-2.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-home-3.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-home-4.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-larn-1.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-larn-2.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-larn-3.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-larn-4.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-larn-5.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-view-1.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-view-2.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-view-3.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-view-4.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-badge/badge-view-5.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-absurdface.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-angryface.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-arrow-blue.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-blackboard.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-book.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-books.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-calculation.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-change.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-chat.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-class.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-clock.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-coding.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-crescentmoon.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-crown.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-desktop.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-english.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-error.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-exciteface.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-expressionless.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-fearfulface.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-file-xls.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-filebox.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-folder.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-folders.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-global.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-graduation.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-grinningface.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-growingHeart.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-hangul.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-happyface.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-hourglass.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-korean.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-leaf.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-lightBulb.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-link.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-loveface.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-mail.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-math.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-mathplate.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-megaphone.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-microscope.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-openNew.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-page.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-pencil.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-pensiveface.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-person.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-phone.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-proudface.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-puzzle.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-quiz.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-rank1.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-rank2.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-rank3.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-revolvingHearts.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-sadface.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-search.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-sickface.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-sprout.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-student.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-taja.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-teacher.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-tree.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-vote.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-whiteboard.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-write.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-writeAI.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/ico-img/ico-img-writeSelf.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/logo/logo-cbe.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/logo/logo_txt.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/profile/profile-chatbot.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/profile/profile-org.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/common/profile/profile-org.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/profile/profile-par.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/common/profile/profile-par.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/profile/profile-stu.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/common/profile/profile-stu.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/profile/profile-sys.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/common/profile/profile-sys.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/common/profile/profile-tea.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/common/profile/profile-tea.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_CBT.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_CSAT.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_CSAT_before.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_basetest.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_book.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_canvas.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_career.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_change.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_class.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_contents.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_cording.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_cording_before.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_math.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_math_before.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_monitor.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_monitor_before.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_nownb.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/bookmark/bookmark_taja.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/common/bg-theme-color-autumn-thumb.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/common/bg-theme-color-autumn.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/common/bg-theme-color-default-thumb.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/common/bg-theme-color-spring-thumb.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/common/bg-theme-color-spring.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/common/bg-theme-color-summer-thumb.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/common/bg-theme-color-summer.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/common/bg-theme-color-winter-thumb.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/common/bg-theme-color-winter.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/main/bg-intro.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/custom/main/img-mo.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/main/img-qna.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/main/visual1-mo.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/main/visual1.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/main/visual2-mo.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/main/visual2.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/plus/intro-img-CBT1.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/plus/intro-img-CBT2.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/plus/intro-img-CSAT1.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/plus/intro-img-CSAT2.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/plus/intro-img-book1.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/plus/intro-img-book2.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/plus/intro-img-cording1.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/plus/intro-img-cording2.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/plus/intro-img-math1.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/plus/intro-img-math2.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/plus/intro-img-monitor1.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/plus/intro-img-monitor2.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/plus/intro-img-taja1.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/plus/intro-img-taja2.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/sub/protect1.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/sub/protect2.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/sub/visual-notice.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/temp/mn-book-es.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/temp/mn-book-hs.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/custom/temp/mn-book-ms.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/temp/book.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/temp/chage1.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/temp/chage2.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/temp/img1.jpg
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/temp/img_korean.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/temp/img_math.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/temp/img_math1.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/temp/img_math2.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/temp/img_math3.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/temp/img_math4.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/temp/img_math5.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/temp/img_math6.png
| Binary file is not shown |
+++ resources/front/site/SITE_00000/images/temp/img_read.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/temp/img_sum.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/images/temp/img_write.svg
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/_layout.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/common-common.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/jquery/jquery-3.6.0.min.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/jquery/jquery-ui.min.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/jquery/jquery.easing.1.3.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/jquery/jquery.ui.touch-punch.min.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/module/colouredPenciles.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/module/colouredPenciles.ts
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/module/colouredPenciles_old.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/module/datePicker.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/vendor/chart/chart4.3.0.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/vendor/chart/chartjs-plugin-annotation.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/vendor/chart/chartjs-plugin-datalabels@2.0.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/vendor/etc/ScrollMagic.min.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/vendor/etc/StickyOnTable.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/vendor/etc/TweenMax.min.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/vendor/etc/animation.gsap.min.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/vendor/etc/jQuery.tagify.min.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/vendor/etc/tagify.min.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/vendor/ssm/ssm.min.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/vendor/ssm/ssm.min.js.map
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/vendor/swiper/swiper-bundle.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/common/vendor/swiper/swiper-bundle.js.map
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/custom/custom-common-slide.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/custom/custom-common.js
| This diff is skipped because there are too many other diffs. |
+++ resources/front/site/SITE_00000/js/old/common_old.js
| This diff is skipped because there are too many other diffs. |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?