278 lines
6.6 KiB
Plaintext
278 lines
6.6 KiB
Plaintext
/*
|
|
* ===================================
|
|
* UTKDatePicker.uss
|
|
* 날짜 피커 모달 스타일
|
|
* ===================================
|
|
*
|
|
* 테마 변수를 사용하여 Light/Dark 테마를 지원합니다.
|
|
* 색상 변수는 UTKThemeDark.uss / UTKThemeLight.uss에서 정의됩니다.
|
|
*/
|
|
|
|
/* ===================================
|
|
Root Container
|
|
=================================== */
|
|
|
|
.utk-date-picker {
|
|
position: absolute;
|
|
background-color: var(--color-bg-modal);
|
|
border-radius: var(--radius-l);
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
padding: var(--space-l);
|
|
min-width: 300px;
|
|
}
|
|
|
|
/* ===================================
|
|
Header
|
|
=================================== */
|
|
|
|
.utk-date-picker__header {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--space-l);
|
|
}
|
|
|
|
.utk-date-picker__title {
|
|
font-size: var(--font-size-h3);
|
|
-unity-font-style: bold;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.utk-date-picker__close-btn {
|
|
width: var(--size-icon-btn);
|
|
height: var(--size-icon-btn);
|
|
background-color: transparent;
|
|
border-width: 0;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-body2);
|
|
}
|
|
|
|
.utk-date-picker__close-btn:hover {
|
|
color: var(--color-text-primary);
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-radius: var(--radius-m);
|
|
}
|
|
|
|
/* ===================================
|
|
Navigation Row
|
|
=================================== */
|
|
|
|
.utk-date-picker__nav-row {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--space-m);
|
|
}
|
|
|
|
.utk-date-picker__nav-group {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.utk-date-picker__nav-btn {
|
|
width: var(--size-nav-btn);
|
|
height: var(--size-nav-btn);
|
|
background-color: var(--color-btn-normal);
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
border-radius: var(--radius-s);
|
|
color: var(--color-text-primary);
|
|
font-size: var(--font-size-h2);
|
|
}
|
|
|
|
.utk-date-picker__nav-btn:hover {
|
|
background-color: var(--color-btn-hover);
|
|
}
|
|
|
|
.utk-date-picker__nav-btn:active {
|
|
background-color: var(--color-btn-pressed);
|
|
}
|
|
|
|
.utk-date-picker__nav-btn--prev-year {
|
|
margin-right: var(--space-s);
|
|
}
|
|
|
|
.utk-date-picker__nav-btn--next-year {
|
|
margin-left: var(--space-s);
|
|
}
|
|
|
|
.utk-date-picker__year-month-label {
|
|
color: var(--color-text-primary);
|
|
font-size: var(--font-size-body1);
|
|
-unity-text-align: middle-center;
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
/* ===================================
|
|
Weekday Header
|
|
=================================== */
|
|
|
|
.utk-date-picker__day-names {
|
|
flex-direction: row;
|
|
margin-bottom: var(--space-s);
|
|
padding-bottom: var(--space-s);
|
|
border-bottom-width: var(--border-width);
|
|
border-bottom-color: var(--color-border);
|
|
}
|
|
|
|
.utk-date-picker__day-name {
|
|
flex-grow: 1;
|
|
flex-basis: 0;
|
|
-unity-text-align: middle-center;
|
|
font-size: var(--font-size-label3);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.utk-date-picker__day-name--sunday {
|
|
color: var(--color-calendar-sunday);
|
|
}
|
|
|
|
.utk-date-picker__day-name--saturday {
|
|
color: var(--color-calendar-saturday);
|
|
}
|
|
|
|
/* ===================================
|
|
Calendar Grid
|
|
=================================== */
|
|
|
|
.utk-date-picker__calendar-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.utk-date-picker__day-btn {
|
|
flex-grow: 1;
|
|
flex-basis: 0;
|
|
height: 28px;
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
font-size: var(--font-size-body2);
|
|
border-width: 0;
|
|
border-radius: var(--radius-s);
|
|
background-color: transparent;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.utk-date-picker__day-btn:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.utk-date-picker__day-btn:disabled {
|
|
color: var(--color-text-disabled);
|
|
}
|
|
|
|
.utk-date-picker__day-btn--sunday {
|
|
color: var(--color-calendar-sunday);
|
|
}
|
|
|
|
.utk-date-picker__day-btn--saturday {
|
|
color: var(--color-calendar-saturday);
|
|
}
|
|
|
|
.utk-date-picker__day-btn--today {
|
|
color: var(--color-calendar-today);
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
.utk-date-picker__day-btn--selected {
|
|
background-color: var(--color-calendar-selected);
|
|
color: var(--color-text-on-primary);
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
.utk-date-picker__day-btn--selected:hover {
|
|
background-color: var(--color-btn-primary-hover);
|
|
}
|
|
|
|
.utk-date-picker__day-btn--other-month {
|
|
color: var(--color-text-disabled);
|
|
}
|
|
|
|
/* ===================================
|
|
Time Picker Row
|
|
=================================== */
|
|
|
|
.utk-date-picker__time-row {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-top: var(--space-l);
|
|
padding-top: var(--space-l);
|
|
border-top-width: var(--border-width);
|
|
border-top-color: var(--color-border);
|
|
}
|
|
|
|
.utk-date-picker__time-label {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-body2);
|
|
margin-right: var(--space-m);
|
|
}
|
|
|
|
.utk-date-picker__time-stepper {
|
|
width: 70px;
|
|
height: var(--size-input-height);
|
|
}
|
|
|
|
.utk-date-picker__time-separator {
|
|
color: var(--color-text-primary);
|
|
font-size: var(--font-size-body2);
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
/* ===================================
|
|
Button Row
|
|
=================================== */
|
|
|
|
.utk-date-picker__button-row {
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.utk-date-picker__cancel-btn {
|
|
margin-right: var(--space-m);
|
|
width: var(--size-btn-min-width);
|
|
height: var(--size-btn-height);
|
|
font-size: var(--font-size-body2);
|
|
background-color: var(--color-btn-normal);
|
|
color: var(--color-text-primary);
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.utk-date-picker__cancel-btn:hover {
|
|
background-color: var(--color-btn-hover);
|
|
}
|
|
|
|
.utk-date-picker__confirm-btn {
|
|
width: var(--size-btn-min-width);
|
|
height: var(--size-btn-height);
|
|
font-size: var(--font-size-body2);
|
|
background-color: var(--color-btn-primary);
|
|
color: var(--color-text-on-primary);
|
|
border-width: 0;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.utk-date-picker__confirm-btn:hover {
|
|
background-color: var(--color-btn-primary-hover);
|
|
}
|
|
|
|
.utk-date-picker__today-btn {
|
|
margin-right: auto;
|
|
width: 60px;
|
|
height: var(--size-btn-height);
|
|
background-color: transparent;
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
border-radius: var(--radius-m);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-label3);
|
|
}
|
|
|
|
.utk-date-picker__today-btn:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
color: var(--color-text-primary);
|
|
}
|