mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-15 05:34:53 +08:00
276 lines
6.3 KiB
SCSS
276 lines
6.3 KiB
SCSS
// scss-lint:disable SelectorDepth NestingDepth
|
|
|
|
.dp--menu-wrapper {
|
|
font-weight: normal;
|
|
|
|
.dp__menu,
|
|
&.dp__menu {
|
|
border: 0;
|
|
box-shadow: 0px 4px 16px rgba(35, 31, 32, 0.15)
|
|
}
|
|
|
|
.dp__action_buttons {
|
|
flex: 1;
|
|
gap: .5rem;
|
|
}
|
|
|
|
.dp__active_date {
|
|
background-color: var(--sn-science-blue);
|
|
}
|
|
|
|
.dp__calendar_header_separator {
|
|
display: none;
|
|
}
|
|
|
|
.dp__month_year_wrap {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.dp__month_year_row {
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.dp__menu_inner {
|
|
margin: 0 1rem;
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.dp__time_picker_overlay_container {
|
|
padding-bottom: .5rem;
|
|
}
|
|
|
|
.dp__button_bottom {
|
|
background-color: var(--sn-white);
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.dp--tp-wrap {
|
|
border-top: 1px solid var(--sn-light-grey);
|
|
padding: .5rem 1rem;
|
|
|
|
.dp__time_display {
|
|
margin: .5rem 0;
|
|
}
|
|
|
|
.dp__button_bottom {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.dp__action_cancel {
|
|
color: var(--sn-blue);
|
|
}
|
|
|
|
.dp__action_button {
|
|
margin-inline-start: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dp__inner_nav {
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
.dp__tp_inline_btn_bar {
|
|
height: 2px;
|
|
}
|
|
|
|
.dp__calendar_item {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dp__btn:hover {
|
|
.dp__tp_inline_btn_bar {
|
|
background-color: var(--sn-science-blue);
|
|
}
|
|
}
|
|
|
|
.dp__overlay_container {
|
|
padding-bottom: .5rem;
|
|
}
|
|
|
|
.dp--arrow-btn-nav {
|
|
display: flex;
|
|
height: 40px;
|
|
padding: 0;
|
|
width: 40px;
|
|
|
|
.dp__inner_nav {
|
|
height: 40px;
|
|
padding: 0;
|
|
width: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dp__input_wrap {
|
|
.dp__input_icon {
|
|
display: flex;
|
|
height: 1.5rem;
|
|
left: .5rem;
|
|
|
|
img {
|
|
width: 1rem;
|
|
}
|
|
}
|
|
|
|
.dp__input {
|
|
line-height: unset;
|
|
}
|
|
}
|
|
|
|
.dp__main.only-time {
|
|
.dp--tp-wrap {
|
|
border-top: none;
|
|
}
|
|
|
|
.dp__overlay_container {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.date-time-picker {
|
|
&.size-mb {
|
|
.dp__input {
|
|
height: 44px;
|
|
}
|
|
}
|
|
|
|
&.size-sm {
|
|
.dp__input {
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
&.size-xs {
|
|
.dp__input {
|
|
height: 36px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dp__theme_light {
|
|
--dp-background-color: var(--sn-white);
|
|
--dp-text-color: var(--sn-black);
|
|
--dp-hover-color: var(--sn-super-light-grey);
|
|
--dp-hover-text-color: #212121;
|
|
--dp-hover-icon-color: #959595;
|
|
--dp-primary-color: var(--sn-blue);
|
|
--dp-primary-disabled-color: var(--sn-super-light-blue);
|
|
--dp-primary-text-color: var(--sn-white);
|
|
--dp-secondary-color: var(--sn-grey);
|
|
--dp-border-color: var(--sn-light-grey);
|
|
--dp-menu-border-color: var(--sn-light-grey);
|
|
--dp-border-color-hover: var(--sn-sleepy-grey);
|
|
--dp-disabled-color: var(--sn-super-light-grey);
|
|
--dp-scroll-bar-background: var(--sn-white);
|
|
--dp-scroll-bar-color: var(--sn-grey);
|
|
--dp-success-color: var(--sn-blue);
|
|
--dp-success-color-disabled: var(--sn-super-light-blue);
|
|
--dp-icon-color: var(--sn-black);
|
|
--dp-danger-color: var(--sn-delete-red);
|
|
--dp-marker-color: var(--sn-delete-red-disabled);
|
|
--dp-tooltip-color: var(--sn-super-light-grey);
|
|
--dp-disabled-color-text: var(--sn-grey);
|
|
--dp-highlight-color: var(--sn-super-light-grey);
|
|
--dp-range-between-dates-background-color: var(--dp-hover-color, var(--sn-super-light-grey));
|
|
--dp-range-between-dates-text-color: var(--dp-hover-text-color, var(--sn-black));
|
|
--dp-range-between-border-color: var(--dp-hover-color, var(--sn-super-light-grey));
|
|
}
|
|
|
|
.dp__input_focus {
|
|
&:hover {
|
|
border-color: var(--sn-science-blue);
|
|
}
|
|
border-color: var(--sn-science-blue);
|
|
}
|
|
|
|
:root {
|
|
/*General*/
|
|
--dp-font-family: inherit; /*Font family*/
|
|
--dp-border-radius: .25rem; /*Configurable border-radius*/
|
|
--dp-cell-border-radius: .25rem; /*Specific border radius for the calendar cell*/
|
|
--dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/
|
|
|
|
/*Sizing*/
|
|
--dp-button-height: 2.5rem; /*Size for buttons in overlays*/
|
|
--dp-month-year-row-height: 2.5rem; /*Height of the month-year select row*/
|
|
--dp-month-year-row-button-size: 2.5rem; /*Specific height for the next/previous buttons*/
|
|
--dp-button-icon-height: 1.5rem; /*Icon sizing in buttons*/
|
|
--dp-cell-size: 1.875rem; /*Width and height of calendar cell*/
|
|
--dp-cell-padding: 0rem; /*Padding in the cell*/
|
|
--dp-common-padding: 1rem; /*Common padding used*/
|
|
--dp-input-padding: .3em 2rem .3rem 1rem; /*Padding in the input*/
|
|
--dp-menu-min-width: 276px; /*Adjust the min width of the menu*/
|
|
--dp-action-row-padding: 0 1rem 1rem; /*Adjust padding for the action row*/
|
|
--dp-action-buttons-padding: 0 .625rem; /*Adjust padding for the action buttons in action row*/
|
|
--dp-action-button-height: 1.875rem; /*Adjust height for the action buttons in action row*/
|
|
--dp-row-margin: 2px 0; /*Adjust the spacing between rows in the calendar*/
|
|
--dp-calendar-header-cell-padding: .5rem; /*Adjust padding in calendar header cells*/
|
|
--dp-two-calendars-spacing: .75rem; /*Space between multiple calendars*/
|
|
--dp-overlay-col-padding: .25rem; /*Padding in the overlay column*/
|
|
--dp-time-inc-dec-button-size: 1.5rem; /*Sizing for arrow buttons in the time picker*/
|
|
--dp-menu-padding: 1rem; /*Menu padding*/
|
|
--dp-input-icon-padding: 2.25rem; /*Padding on the left side of the input if icon is present*/
|
|
|
|
/*Font sizes*/
|
|
--dp-font-size: .875rem; /*Default font-size*/
|
|
--dp-preview-font-size: .75rem; /*Font size of the date preview in the action row*/
|
|
--dp-time-font-size: 1.875rem; /*Font size in the time picker*/
|
|
|
|
/*Transitions*/
|
|
--dp-animation-duration: 0.1s; /*Transition duration*/
|
|
--dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1); /*Timing on menu appear animation*/
|
|
--dp-transition-timing: ease-out; /*Timing on slide animations*/
|
|
}
|
|
|
|
|
|
|
|
// Legacy
|
|
|
|
.bootstrap-datetimepicker-widget {
|
|
.glyphicon-calendar {
|
|
margin: 0;
|
|
}
|
|
|
|
.datepicker tbody .day {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.datepicker thead th {
|
|
padding: 5px 5px !important;
|
|
}
|
|
|
|
.timepicker-picker {
|
|
padding: 0 60px;
|
|
|
|
td {
|
|
height: initial;
|
|
line-height: initial;
|
|
|
|
a {
|
|
padding: 0;
|
|
}
|
|
|
|
.timepicker-hour,
|
|
.timepicker-minute {
|
|
height: initial;
|
|
line-height: initial;
|
|
padding: 6px 0;
|
|
}
|
|
}
|
|
|
|
.glyphicon-chevron-up,
|
|
.glyphicon-chevron-down {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 100%;
|
|
justify-content: center;
|
|
line-height: 1;
|
|
}
|
|
|
|
.separator {
|
|
width: 10px;
|
|
}
|
|
}
|
|
}
|