181 lines
4.2 KiB
SCSS
181 lines
4.2 KiB
SCSS
@import "variables";
|
|
@import "components/DatepickerInput";
|
|
@import "components/DatepickerMenu";
|
|
@import "components/Calendar";
|
|
@import "components/MonthYearInput";
|
|
@import "components/SelectionGrid";
|
|
@import "components/TimeInput";
|
|
@import "components/ActionRow";
|
|
|
|
.dp__theme_dark {
|
|
--dp-background-color: #212121;
|
|
--dp-text-color: #fff;
|
|
--dp-hover-color: #484848;
|
|
--dp-hover-text-color: #fff;
|
|
--dp-hover-icon-color: #959595;
|
|
--dp-primary-color: #005cb2;
|
|
--dp-primary-disabled-color: #61a8ea;
|
|
--dp-primary-text-color: #fff;
|
|
--dp-secondary-color: #a9a9a9;
|
|
--dp-border-color: #2d2d2d;
|
|
--dp-menu-border-color: #2d2d2d;
|
|
--dp-border-color-hover: #aaaeb7;
|
|
--dp-disabled-color: #737373;
|
|
--dp-disabled-color-text: #d0d0d0;
|
|
--dp-scroll-bar-background: #212121;
|
|
--dp-scroll-bar-color: #484848;
|
|
--dp-success-color: #00701a;
|
|
--dp-success-color-disabled: #428f59;
|
|
--dp-icon-color: #959595;
|
|
--dp-danger-color: #e53935;
|
|
--dp-marker-color: #e53935;
|
|
--dp-tooltip-color: #3e3e3e;
|
|
--dp-highlight-color: rgb(0 92 178 / 20%);
|
|
}
|
|
|
|
.dp__theme_light {
|
|
--dp-background-color: #fff;
|
|
--dp-text-color: #212121;
|
|
--dp-hover-color: #f3f3f3;
|
|
--dp-hover-text-color: #212121;
|
|
--dp-hover-icon-color: #959595;
|
|
--dp-primary-color: #1976d2;
|
|
--dp-primary-disabled-color: #6bacea;
|
|
--dp-primary-text-color: #f8f5f5;
|
|
--dp-secondary-color: #c0c4cc;
|
|
--dp-border-color: #ddd;
|
|
--dp-menu-border-color: #ddd;
|
|
--dp-border-color-hover: #aaaeb7;
|
|
--dp-disabled-color: #f6f6f6;
|
|
--dp-scroll-bar-background: #f3f3f3;
|
|
--dp-scroll-bar-color: #959595;
|
|
--dp-success-color: #76d275;
|
|
--dp-success-color-disabled: #a3d9b1;
|
|
--dp-icon-color: #959595;
|
|
--dp-danger-color: #ff6f60;
|
|
--dp-marker-color: #ff6f60;
|
|
--dp-tooltip-color: #fafafa;
|
|
--dp-disabled-color-text: #8e8e8e;
|
|
--dp-highlight-color: rgb(25 118 210 / 10%);
|
|
}
|
|
|
|
.dp__main {
|
|
font-family: $dp__font_family;
|
|
user-select: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dp__pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Allow control of color property on icons
|
|
.dp__icon {
|
|
stroke: currentcolor;
|
|
fill: currentcolor;
|
|
}
|
|
|
|
// Div style that is displayed on the bottom of the menu for switching layouts
|
|
.dp__button {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: var(--dp-icon-color);
|
|
background: var(--dp-background-color);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
align-content: center;
|
|
justify-content: center;
|
|
padding: $dp__common_padding;
|
|
box-sizing: border-box;
|
|
height: $dp__button_height;
|
|
|
|
&:hover {
|
|
background: var(--dp-hover-color);
|
|
color: var(--dp-hover-icon-color);
|
|
}
|
|
|
|
svg {
|
|
height: $dp__button_icon_height;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.dp__button_bottom {
|
|
border-bottom-left-radius: $dp__border_radius;
|
|
border-bottom-right-radius: $dp__border_radius;
|
|
}
|
|
|
|
.dp__flex_display {
|
|
display: flex;
|
|
}
|
|
|
|
.dp__flex_display_with_input {
|
|
flex-direction: column;
|
|
align-items: start;
|
|
}
|
|
|
|
.dp__relative {
|
|
position: relative;
|
|
}
|
|
|
|
.calendar-next-enter-active,
|
|
.calendar-next-leave-active,
|
|
.calendar-prev-enter-active,
|
|
.calendar-prev-leave-active {
|
|
transition: all $dp__transition_duration ease-out;
|
|
}
|
|
|
|
.calendar-next-enter-from {
|
|
opacity: 0;
|
|
transform: translateX($dp__transition_length);
|
|
}
|
|
|
|
.calendar-next-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-$dp__transition_length);
|
|
}
|
|
|
|
.calendar-prev-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(-$dp__transition_length);
|
|
}
|
|
|
|
.calendar-prev-leave-to {
|
|
opacity: 0;
|
|
transform: translateX($dp__transition_length);
|
|
}
|
|
|
|
.dp-menu-appear-enter-active,
|
|
.dp-menu-appear-leave-active,
|
|
.dp-slide-up-enter-active,
|
|
.dp-slide-up-leave-active,
|
|
.dp-slide-down-enter-active,
|
|
.dp-slide-down-leave-active {
|
|
transition: all 0.1s ease-out;
|
|
}
|
|
|
|
.dp-slide-down-leave-to,
|
|
.dp-slide-up-enter-from {
|
|
opacity: 0;
|
|
transform: translateY($dp__transition_length);
|
|
}
|
|
|
|
.dp-slide-down-enter-from,
|
|
.dp-slide-up-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-$dp__transition_length);
|
|
}
|
|
|
|
.dp-menu-appear-enter-from {
|
|
opacity: 0;
|
|
}
|
|
|
|
.dp-menu-appear-enter-active,
|
|
.dp-menu-appear-leave-active {
|
|
transition: opacity 0.1s ease;
|
|
}
|
|
|
|
.dp-menu-appear-leave-to {
|
|
opacity: 1;
|
|
}
|