.sr-only, .bootstrap-datetimepicker-widget .btn::after, .bootstrap-datetimepicker-widget .btn::after, .bootstrap-datetimepicker-widget .btn::after, .bootstrap-datetimepicker-widget .btn::after, .bootstrap-datetimepicker-widget .btn::after, .bootstrap-datetimepicker-widget .btn::after, .bootstrap-datetimepicker-widget .btn::after, .bootstrap-datetimepicker-widget .btn::after, .bootstrap-datetimepicker-widget .btn::after, .bootstrap-datetimepicker-widget .picker-switch::after, .bootstrap-datetimepicker-widget table th.prev::after, .bootstrap-datetimepicker-widget table th.next::after {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.bootstrap-datetimepicker-widget {
list-style: none;
}
.bootstrap-datetimepicker-widget a .btn:hover {
background-color: transparent;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
padding: 8px 6px; width: 254px; max-width: 254px; .tim-icons, .v2lrf-by-nucleo { opacity: 1; } .picker-switch { .table-condensed { &:hover { background: #eee; border-radius: 3px; } } } .timepicker-picker { .table-condensed { margin-top: 10px; margin-bottom: 5px; .btn[data-action="togglePeriod"]:hover, .separator { color: $dark-gray !important; } } } .table-condensed { .month, .year, .decade { color: $dark-gray; &.active { color: $white; } } }
}
@include media-breakpoint-up(md) {
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; }
}
@include media-breakpoint-up(lg) {
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; }
}
@include media-breakpoint-up(xl) {
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; }
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
display: inline-block; position: absolute; width: 0; height: 0; vertical-align: middle; content: ""; right: auto; border-bottom: .4em solid; border-right: .4em solid transparent; border-left: .4em solid transparent;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
display: none;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
display: inline-block; position: absolute; width: 0; height: 0; vertical-align: middle; content: ""; top: auto; bottom: -6px; right: auto; left: 10px; color: $white; border-top: .4em solid; border-right: .4em solid transparent; border-left: .4em solid transparent;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top {
margin-top: auto; margin-bottom: -20px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top.open {
margin-top: auto; margin-bottom: 3px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
left: auto; right: 6px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
left: auto; right: 7px;
}
.bootstrap-datetimepicker-widget .list-unstyled {
margin: 0;
}
.bootstrap-datetimepicker-widget a {
padding: 0; border-width: 0; color: #fff; background-color: transparent;
}
.bootstrap-datetimepicker-widget a, .bootstrap-datetimepicker-widget a:hover {
color: $primary;
}
.bootstrap-datetimepicker-widget a:hover {
background-color: transparent;
}
.bootstrap-datetimepicker-widget a:active {
box-shadow: none;
}
.bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second {
width: 40px; height: 40px; line-height: 40px; font-weight: 300; font-size: 1.5em; margin: 3px; border-radius: 50%; color: $dark-gray;
}
.bootstrap-datetimepicker-widget button {
width: 38px; height: 38px; padding: 0; box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
}
.bootstrap-datetimepicker-widget .btn {
margin: 0 !important;
}
.bootstrap-datetimepicker-widget .btn::after {
content: "Increment Hours";
}
.bootstrap-datetimepicker-widget .btn::after {
content: "Increment Minutes";
}
.bootstrap-datetimepicker-widget .btn::after {
content: "Decrement Hours";
}
.bootstrap-datetimepicker-widget .btn::after {
content: "Decrement Minutes";
}
.bootstrap-datetimepicker-widget .btn::after {
content: "Show Hours";
}
.bootstrap-datetimepicker-widget .btn::after {
content: "Show Minutes";
}
.bootstrap-datetimepicker-widget .btn::after {
content: "Toggle AM/PM";
}
.bootstrap-datetimepicker-widget .btn::after {
content: "Clear the picker";
}
.bootstrap-datetimepicker-widget .btn::after {
content: "Set the date to today";
}
.bootstrap-datetimepicker-widget .picker-switch {
text-align: center; border-radius: 3px; color: $primary;
}
.bootstrap-datetimepicker-widget .picker-switch::after {
content: "Toggle Date and Time Screens";
}
.bootstrap-datetimepicker-widget .picker-switch td {
padding: 0; margin: 0; height: auto; width: auto; line-height: inherit;
}
.bootstrap-datetimepicker-widget .picker-switch td span {
line-height: 2.5; height: 2.5em; width: 100%; border-radius: 3px; margin: 2px 0px !important;
}
.bootstrap-datetimepicker-widget table {
width: 100%; margin: 0; text-align: center;
}
.bootstrap-datetimepicker-widget table td>div, .bootstrap-datetimepicker-widget table th>div {
text-align: center;
}
.bootstrap-datetimepicker-widget table th {
height: 20px; line-height: 20px; width: 20px; font-weight: 300;
}
.bootstrap-datetimepicker-widget table th.picker-switch {
width: 145px;
}
.bootstrap-datetimepicker-widget table th.disabled, .bootstrap-datetimepicker-widget table th.disabled:hover {
background: none; color: #cfcfca; cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table th.prev span, .bootstrap-datetimepicker-widget table th.next span {
border-radius: 4px; height: 27px; width: 27px; line-height: 28px; font-size: 12px; border-radius: 50%; text-align: center; color: $primary;
}
.bootstrap-datetimepicker-widget table th.prev::after {
content: "Previous Month";
}
.bootstrap-datetimepicker-widget table th.next::after {
content: "Next Month";
}
.bootstrap-datetimepicker-widget table th.dow {
text-align: center; color: $primary; padding-bottom: 5px; padding-top: 10px;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th {
cursor: pointer;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover span, .bootstrap-datetimepicker-widget table thead tr:first-child th.picker-switch:hover {
background: #eee;
}
.bootstrap-datetimepicker-widget table td.cw>div {
font-size: .8em; height: 20px; line-height: 20px; color: #cfcfca;
}
.bootstrap-datetimepicker-widget table td.day>div, .bootstrap-datetimepicker-widget table td.minute>div, .bootstrap-datetimepicker-widget table td.hour>div {
height: 30px; line-height: 2.2; width: 30px; text-align: center; padding: 0px; border-radius: 50%; margin: 0 auto; z-index: -1; color: $dark-gray; position: relative; font-weight: 300; font-size: 14px; border: none; cursor: pointer; @include transitions($general-transition-time, $transition-ease);
}
.bootstrap-datetimepicker-widget table td.day:hover>div, .bootstrap-datetimepicker-widget table td.hour:hover>div, .bootstrap-datetimepicker-widget table td.minute:hover>div, .bootstrap-datetimepicker-widget table td.second:hover>div {
background: #eee; cursor: pointer;
}
.bootstrap-datetimepicker-widget table td.old>div, .bootstrap-datetimepicker-widget table td.new>div {
color: $default;
}
.bootstrap-datetimepicker-widget table td.today>div:before {
content: ''; display: inline-block; border: 0 0 7px 7px solid transparent; border-bottom-color: #68B3C8; border-top-color: rgba(0, 0, 0, 0.2); position: absolute; bottom: 4px; right: 4px;
}
.bootstrap-datetimepicker-widget table td.active>div, .bootstrap-datetimepicker-widget table td.active:hover>div {
background-color: $primary; color: $white; box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
}
.bootstrap-datetimepicker-widget table td.active.today:before>div {
border-bottom-color: $white;
}
.bootstrap-datetimepicker-widget table td.disabled>div, .bootstrap-datetimepicker-widget table td.disabled:hover>div {
background: none; color: #cfcfca; cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table td span {
display: inline-block; width: 40px; height: 40px; line-height: 40px; margin: 0 3px; cursor: pointer; border-radius: 50%; text-align: center;
}
.bootstrap-datetimepicker-widget table td span.active {
background-color: $primary; color: #FFFFFF;
}
.bootstrap-datetimepicker-widget table td span.old {
color: #cfcfca;
}
.bootstrap-datetimepicker-widget table td span.disabled, .bootstrap-datetimepicker-widget table td span.disabled:hover {
background: none; color: #cfcfca; cursor: not-allowed;
}
.bootstrap-datetimepicker-widget .timepicker-picker span, .bootstrap-datetimepicker-widget .timepicker-hours span, .bootstrap-datetimepicker-widget .timepicker-minutes span {
border-radius: 50% !important;
}
.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
height: 27px; line-height: 27px;
}
.input-group.date .input-group-addon {
cursor: pointer;
}
.table-condensed>tbody>tr>td, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>td, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>thead>tr>th {
padding: 1px; text-align: center; z-index: 1; cursor: pointer;
}
input.datetimepicker+.bootstrap-datetimepicker-widget {
.picker-switch, table th.prev span, table th.next span, table td.day>div, a[data-action="togglePicker"], a[data-action="togglePicker"]:hover, span, .timepicker-hours span, .timepicker-minutes span, .separator, table td.minute>div, table td.hour>div { color: $dark-gray; } table th.dow { color: $opacity-8; } table td.old>div, table td.new>div { color: rgba(255, 255, 255, .4); } button[data-action] { background-color: $white; } table td.active>div, table td.active:hover>div { background-color: $white; } table td:not(.active).day:hover>div, table td.hour:hover>div, table td.minute:hover>div, table td.second:hover>div, table td span:hover { background: $opacity-2; } table thead tr:first-child th:hover span, table thead tr:first-child th.picker-switch:hover { background-color: $opacity-2; }
}
input.datetimepicker+.bootstrap-datetimepicker-widget {
background-color: $primary; table td.active>div, table td.active:hover>div, button[data-action], &.dropdown-menu.top:after, &.dropdown-menu.bottom:before { color: $primary; }
}
input.datetimepicker+.bootstrap-datetimepicker-widget {
background-color: $info; table td.active>div, table td.active:hover>div, button[data-action], &.dropdown-menu.top:after, &.dropdown-menu.bottom:before { color: $info; }
}
input.datetimepicker+.bootstrap-datetimepicker-widget {
background-color: $success; table td.active>div, table td.active:hover>div, button[data-action], &.dropdown-menu.top:after, &.dropdown-menu.bottom:before { color: $success; }
}
input.datetimepicker+.bootstrap-datetimepicker-widget {
background-color: $danger; table td.active>div, table td.active:hover>div, button[data-action], &.dropdown-menu.top:after, &.dropdown-menu.bottom:before { color: $danger; }
}
input.datetimepicker+.bootstrap-datetimepicker-widget {
background-color: $warning; table td.active>div, table td.active:hover>div, button[data-action], &.dropdown-menu.top:after, &.dropdown-menu.bottom:before { color: $warning; }
}
.bootstrap-datetimepicker-widget {
&.dropdown-black { .datepicker-days { .day, .minute { color: rgba(255, 255, 255, 0.7); &:hover { color: #212529; } } } table td span, table td.minute, table td.hour { color: rgba(255, 255, 255, 0.7); } table td span:hover, table td.minute:hover, table td.hour:hover { background: transparent; color: rgba(255, 255, 255, 0.4); div { background: transparent; } } table td .btn[data-action] { color: $white; } table td .btn[data-action="togglePeriod"] { background: transparent; } }
}