diff --git a/public/css/custom.css b/public/css/custom.css index e57b64f..1e22a80 100644 --- a/public/css/custom.css +++ b/public/css/custom.css @@ -157,7 +157,7 @@ .fc-toolbar-title { cursor: pointer; } -/* 클릭 가능한 날짜 (오늘 + 미래) */ +/* 클릭 가능한 날짜 */ .fc-daygrid-day.clickable { cursor: pointer; transition: background-color 0.2s ease-in-out; @@ -362,6 +362,28 @@ background-color: #0b5ed7 !important; color: white; } +/* 풀 연차 버튼 스타일 */ +.vac-btn-primary { + color: #fff; + background-color: #28a745; /* 녹색 */ + border-color: #28a745; + box-shadow: 0 0.125rem 0.25rem 0 rgba(40, 167, 69, 0.4); + font-size: 28px; + transition: all 0.2s ease-in-out; +} +/* 풀 연차 버튼 활성화 스타일 */ +.vac-btn-primary.active { + background-color: #218838 !important; + color: #fff; + border: 3px solid #91d091 !important; + box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); + transform: scale(1.1); +} +/* 풀 연차 버튼이 눌렸을 때 효과 */ +.vac-btn-primary:active { + transform: scale(0.9); + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); +} /* 버튼 기본 */ .vac-btn-success { transition: all 0.2s ease-in-out; diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue index b706a2a..90d48e8 100644 --- a/src/components/button/HalfDayButtons.vue +++ b/src/components/button/HalfDayButtons.vue @@ -1,67 +1,72 @@ - diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue index b8f3439..1db1647 100644 --- a/src/components/modal/VacationModal.vue +++ b/src/components/modal/VacationModal.vue @@ -1,7 +1,7 @@