Skip to content

Instantly share code, notes, and snippets.

@tagliala
Last active September 3, 2021 08:23
Show Gist options
  • Save tagliala/10cb429074b3c5dd0268af1bfc2ed367 to your computer and use it in GitHub Desktop.
Save tagliala/10cb429074b3c5dd0268af1bfc2ed367 to your computer and use it in GitHub Desktop.
jQuery UI Datepicker BS4
@use "sass:math";
$calendar-padding-y: math.div($spacer, 3) !default;
$calendar-padding-x: math.div($spacer, 3) !default;
$calendar-active: $primary !default;
$calendar-hover: $primary !default;
.ui-datepicker {
display: none;
padding: $popover-body-padding-y $popover-body-padding-x;
background-color: $popover-bg;
border: $popover-border-width solid $popover-border-color;
border-radius: $popover-border-radius;
box-shadow: $popover-box-shadow;
&-header {
padding: $calendar-padding-y $calendar-padding-x;
}
&-title {
font-weight: $font-weight-bold;
text-align: center;
}
&-prev,
&-next {
margin-top: 2px;
}
&-prev {
float: left;
}
&-next {
float: right;
}
&-calendar {
th {
width: percentage(math.div(1, 7));
padding: $calendar-padding-y $calendar-padding-x;
}
th,
td {
text-align: center;
vertical-align: middle;
}
tr,
td {
padding: 0;
}
}
}
.ui-icon {
display: block;
width: 8px;
height: 16px;
overflow: hidden;
text-indent: -99999px;
&-circle-triangle-e,
&-circle-triangle-w {
margin-top: 2px;
border: 8px solid transparent;
&:hover {
cursor: pointer;
}
}
&-circle-triangle-e {
margin-right: 5px;
border-right: 0;
border-left-color: inherit;
}
&-circle-triangle-w {
margin-left: 5px;
border-right-color: inherit;
border-left: 0;
}
}
.ui-state {
&-default {
display: block;
width: 100%;
padding-top: $calendar-padding-y;
padding-bottom: $calendar-padding-y;
color: $body-color;
cursor: pointer;
&:hover {
color: color-contrast($calendar-hover);
text-decoration: none;
background: $calendar-hover;
}
}
&-disabled {
color: $text-muted;
}
&-highlight {
text-decoration: underline !important; /* stylelint-disable-line declaration-no-important */
}
&-active {
color: color-contrast($calendar-active);
background: $calendar-active;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment