CSS pour le datepicker
This commit is contained in:
parent
7001751817
commit
c8f4686388
2 changed files with 672 additions and 0 deletions
258
fiches/static/fiches/css/datepicker.css
Normal file
258
fiches/static/fiches/css/datepicker.css
Normal file
|
|
@ -0,0 +1,258 @@
|
||||||
|
/*
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2019 Hidenao Miyamoto
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
*/
|
||||||
|
.datepicker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.datepicker.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 20;
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
.datepicker-dropdown.datepicker-orient-top {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-picker {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 0px;
|
||||||
|
background-color: #301827;
|
||||||
|
}
|
||||||
|
.datepicker-dropdown .datepicker-picker {
|
||||||
|
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
|
||||||
|
}
|
||||||
|
.datepicker-picker span {
|
||||||
|
display: block;
|
||||||
|
flex: 1;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0px;
|
||||||
|
cursor: default;
|
||||||
|
text-align: center;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-main {
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-footer {
|
||||||
|
box-shadow: inset 0 1px 1px rgba(10, 10, 10, 0.1);
|
||||||
|
background-color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-grid, .datepicker-view .days-of-week, .datepicker-view, .datepicker-controls {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-grid {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-view .days .datepicker-cell, .datepicker-view .dow {
|
||||||
|
flex-basis: 14.2857142857%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-view.datepicker-grid .datepicker-cell {
|
||||||
|
flex-basis: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-cell, .datepicker-view .week {
|
||||||
|
height: 2.25rem;
|
||||||
|
line-height: 2.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-title {
|
||||||
|
box-shadow: inset 0 -1px 1px rgba(10, 10, 10, 0.1);
|
||||||
|
background-color: #1f0e19;
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-header .datepicker-controls {
|
||||||
|
padding: 2px 2px 0;
|
||||||
|
}
|
||||||
|
.datepicker-controls .button {
|
||||||
|
display: inline-flex;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0;
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
border-radius: 0px;
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: calc(0.375em - 1px) 0.75em;
|
||||||
|
height: 2.25em;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.5;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #363636;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.datepicker-controls .button:focus, .datepicker-controls .button:active {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.datepicker-controls .button:hover {
|
||||||
|
border-color: #b5b5b5;
|
||||||
|
color: #363636;
|
||||||
|
}
|
||||||
|
.datepicker-controls .button:focus {
|
||||||
|
border-color: #3273dc;
|
||||||
|
color: #363636;
|
||||||
|
}
|
||||||
|
.datepicker-controls .button:focus:not(:active) {
|
||||||
|
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
|
||||||
|
}
|
||||||
|
.datepicker-controls .button:active {
|
||||||
|
border-color: #4a4a4a;
|
||||||
|
color: #363636;
|
||||||
|
}
|
||||||
|
.datepicker-controls .button[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.datepicker-header .datepicker-controls .button {
|
||||||
|
border-color: transparent;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.datepicker-header .datepicker-controls .button:hover {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
.datepicker-header .datepicker-controls .button:focus:not(:active) {
|
||||||
|
box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
|
||||||
|
}
|
||||||
|
.datepicker-header .datepicker-controls .button:active {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
.datepicker-header .datepicker-controls .button[disabled] {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.datepicker-footer .datepicker-controls .button {
|
||||||
|
margin: calc(0.375rem - 1px) 0.375rem;
|
||||||
|
border-radius: 0px;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
.datepicker-controls .view-switch {
|
||||||
|
flex: auto;
|
||||||
|
}
|
||||||
|
.datepicker-controls .prev-btn,
|
||||||
|
.datepicker-controls .next-btn {
|
||||||
|
padding-right: 0.375rem;
|
||||||
|
padding-left: 0.375rem;
|
||||||
|
width: 2.25rem;
|
||||||
|
}
|
||||||
|
.datepicker-controls .prev-btn.disabled,
|
||||||
|
.datepicker-controls .next-btn.disabled {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-view .dow {
|
||||||
|
height: 1.5rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.datepicker-view .week {
|
||||||
|
width: 2.25rem;
|
||||||
|
color: #b5b5b5;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 22.5rem) {
|
||||||
|
.datepicker-view .week {
|
||||||
|
width: 1.96875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-grid {
|
||||||
|
width: 15.75rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 22.5rem) {
|
||||||
|
.calendar-weeks + .days .datepicker-grid {
|
||||||
|
width: 13.78125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-cell:not(.disabled):hover {
|
||||||
|
background-color: #281420;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.datepicker-cell.focused:not(.selected) {
|
||||||
|
background-color: #1f1019;
|
||||||
|
}
|
||||||
|
.datepicker-cell.selected, .datepicker-cell.selected:hover {
|
||||||
|
background-color: #3b1e31;
|
||||||
|
color: #ffdc00;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.datepicker-cell.disabled {
|
||||||
|
color: #dbdbdb;
|
||||||
|
}
|
||||||
|
.datepicker-cell.prev:not(.disabled), .datepicker-cell.next:not(.disabled) {
|
||||||
|
color: #7a7a7a;
|
||||||
|
}
|
||||||
|
.datepicker-cell.prev.selected, .datepicker-cell.next.selected {
|
||||||
|
color: #ccb000;
|
||||||
|
}
|
||||||
|
.datepicker-cell.highlighted:not(.selected):not(.today) {
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: #3b1e31;
|
||||||
|
}
|
||||||
|
.datepicker-cell.highlighted:not(.selected):not(.today):not(.disabled):hover {
|
||||||
|
background-color: #331a2a;
|
||||||
|
}
|
||||||
|
.datepicker-cell.highlighted:not(.selected):not(.today).focused {
|
||||||
|
background-color: #1f1019;
|
||||||
|
}
|
||||||
|
.datepicker-cell.today:not(.selected) {
|
||||||
|
background-color: #3b1e31;
|
||||||
|
}
|
||||||
|
.datepicker-cell.today:not(.selected):not(.disabled) {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.datepicker-cell.today.focused:not(.selected) {
|
||||||
|
background-color: #331a2a;
|
||||||
|
}
|
||||||
|
.datepicker-view.datepicker-grid .datepicker-cell {
|
||||||
|
height: 4.5rem;
|
||||||
|
line-height: 4.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-input.in-edit {
|
||||||
|
border-color: #2366d1;
|
||||||
|
}
|
||||||
|
.datepicker-input.in-edit:focus, .datepicker-input.in-edit:active {
|
||||||
|
box-shadow: 0 0 0.25em 0.25em rgba(35, 102, 209, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=datepicker.css.map */
|
||||||
414
fiches/static/fiches/scss/datepicker.scss
Normal file
414
fiches/static/fiches/scss/datepicker.scss
Normal file
|
|
@ -0,0 +1,414 @@
|
||||||
|
/*
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2019 Hidenao Miyamoto
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
//== foundational variables ==//
|
||||||
|
$black: hsl(0, 0%, 4%) !default;
|
||||||
|
$white: hsl(0, 0%, 100%) !default;
|
||||||
|
$light: hsl(0, 0%, 96%) !default; // white-ter
|
||||||
|
$dark: hsl(0, 0%, 21%) !default; // grey-darker
|
||||||
|
$link: hsl(217, 71%, 53%) !default; // blue
|
||||||
|
|
||||||
|
$grey-dark: lighten($black, 25%) !default;
|
||||||
|
$grey-light: darken($light, 25%) !default;
|
||||||
|
$grey-lighter: darken($light, 10%) !default;
|
||||||
|
|
||||||
|
//== datepicker variables ==//
|
||||||
|
$dp-background-color: #301827 !default;
|
||||||
|
$dp-border-color: #1f0e19 !default;
|
||||||
|
$dp-border-radius: 0px !default;
|
||||||
|
$dp-border-radius-small: 0px !default;
|
||||||
|
$dp-line-height-base: 1.5 !default;
|
||||||
|
$dp-font-size-normal: 1rem !default;
|
||||||
|
$dp-font-size-small: 0.75rem !default;
|
||||||
|
$dp-font-weight-semibold: 600 !default;
|
||||||
|
$dp-font-weight-bold: 700 !default;
|
||||||
|
$dp-dropdown-offset: 4px !default;
|
||||||
|
$dp-dropdown-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
|
||||||
|
$dp-dropdown-z: 20 !default;
|
||||||
|
|
||||||
|
$dp-title-background-color: #1f0e19 !default;
|
||||||
|
|
||||||
|
$dp-cell-size-base: 2.25rem !default;
|
||||||
|
$dp-cell-focus-background-color: darken(#301827, 5%) !default;
|
||||||
|
$dp-cell-prevnext-color: hsl(0, 0%, 48%) !default; // grey
|
||||||
|
$dp-cell-disabled-color: $grey-lighter !default;
|
||||||
|
$dp-cell-selected-background-color: #3b1e31 !default;
|
||||||
|
$dp-cell-selected-color: #ffdc00 !default; // link(blue)-invert
|
||||||
|
$dp-cell-selected-font-weight: 600 !default;
|
||||||
|
$dp-cell-today-background-color: #3b1e31 !default; // turquoise (primary)
|
||||||
|
$dp-cell-today-color: #fff !default; // turquoise-invert
|
||||||
|
$dp-cell-highlighted-background-color: #3b1e31 !default;
|
||||||
|
$dp-range-start-end-background-color: $grey-light !default;
|
||||||
|
$dp-range-start-end-color: $dp-cell-selected-color !default;
|
||||||
|
$dp-range-background-color: $grey-lighter !default;
|
||||||
|
$dp-range-today-background-color: $dp-cell-today-background-color !default;
|
||||||
|
$dp-week-color: $grey-light !default;
|
||||||
|
|
||||||
|
$dp-footer-background-color: $light !default;
|
||||||
|
|
||||||
|
$dp-input-in-edit-border-color: darken($link, 5%) !default;
|
||||||
|
$dp-input-in-edit-focus-box-shadow-size: 0 0 0.25em 0.25em !default;
|
||||||
|
|
||||||
|
//== non-configurable variables ==//
|
||||||
|
$dp-cell-shrink-threshold: $dp-cell-size-base * 10; // = 8 * 1.25
|
||||||
|
$dp-cell-shrinked-width: $dp-cell-size-base * 7 / 8;
|
||||||
|
|
||||||
|
//== mixins ==//
|
||||||
|
@mixin dp-header-button-common {
|
||||||
|
border-color: transparent;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin dp-footer-button-common {
|
||||||
|
margin: calc(0.375rem - 1px) 0.375rem;
|
||||||
|
border-radius: $dp-border-radius-small;
|
||||||
|
width: 100%;
|
||||||
|
font-size: $dp-font-size-small;
|
||||||
|
}
|
||||||
|
|
||||||
|
//== styles ==//
|
||||||
|
.datepicker {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: $dp-dropdown-z;
|
||||||
|
padding-top: $dp-dropdown-offset;
|
||||||
|
|
||||||
|
&.datepicker-orient-top {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: $dp-dropdown-offset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-picker {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: $dp-border-radius;
|
||||||
|
background-color: $dp-background-color;
|
||||||
|
|
||||||
|
.datepicker-dropdown & {
|
||||||
|
box-shadow: $dp-dropdown-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
flex: 1;
|
||||||
|
border: 0;
|
||||||
|
border-radius: $dp-border-radius;
|
||||||
|
cursor: default;
|
||||||
|
text-align: center;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-main {
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-footer {
|
||||||
|
box-shadow: inset 0 1px 1px rgba($black, 0.1);
|
||||||
|
background-color: $dp-footer-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
%flex-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
%flex-wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
%flex-basis-day {
|
||||||
|
flex-basis: percentage(1 / 7);
|
||||||
|
}
|
||||||
|
|
||||||
|
%flex-basis-month-year {
|
||||||
|
flex-basis: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
%datepicker-cell-height {
|
||||||
|
height: $dp-cell-size-base;
|
||||||
|
line-height: $dp-cell-size-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-title {
|
||||||
|
box-shadow: inset 0 -1px 1px rgba($black, 0.1);
|
||||||
|
background-color: $dp-title-background-color;
|
||||||
|
padding: 0.375rem 0.75rem;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: $dp-font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-controls {
|
||||||
|
@extend %flex-container;
|
||||||
|
|
||||||
|
.datepicker-header & {
|
||||||
|
padding: 2px 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if mixin-exists(dp-button) {
|
||||||
|
@include dp-button;
|
||||||
|
} @else {
|
||||||
|
.button {
|
||||||
|
$button-color: $dark;
|
||||||
|
$button-background-color: $white;
|
||||||
|
|
||||||
|
$button-border-color: $grey-lighter;
|
||||||
|
$button-border-width: 1px;
|
||||||
|
|
||||||
|
$button-padding-vertical: calc(0.375em - #{$button-border-width});
|
||||||
|
$button-padding-horizontal: 0.75em;
|
||||||
|
|
||||||
|
$button-hover-color: $dark; // link-hover
|
||||||
|
$button-hover-border-color: $grey-light; // link-hover-border
|
||||||
|
|
||||||
|
$button-focus-color: $dark; // link-focus
|
||||||
|
$button-focus-border-color: $link; // link-focus-border
|
||||||
|
$button-focus-box-shadow-size: 0 0 0 0.125em;
|
||||||
|
$button-focus-box-shadow-color: rgba($link, 0.25);
|
||||||
|
|
||||||
|
$button-active-color: $dark; // link-active
|
||||||
|
$button-active-border-color: $grey-dark; // link-active-border
|
||||||
|
|
||||||
|
display: inline-flex;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0;
|
||||||
|
border: $button-border-width solid $button-border-color;
|
||||||
|
border-radius: $dp-border-radius; // control-radius
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: $button-background-color;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: $button-padding-vertical $button-padding-horizontal;
|
||||||
|
height: 2.25em; // control-height
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: center;
|
||||||
|
line-height: $dp-line-height-base; // control-line-height
|
||||||
|
white-space: nowrap;
|
||||||
|
color: $button-color;
|
||||||
|
font-size: $dp-font-size-normal; // size-normal
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $button-hover-border-color;
|
||||||
|
color: $button-hover-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $button-focus-border-color;
|
||||||
|
color: $button-focus-color;
|
||||||
|
|
||||||
|
&:not(:active) {
|
||||||
|
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
border-color: $button-active-border-color;
|
||||||
|
color: $button-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[disabled] {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-header & {
|
||||||
|
@include dp-header-button-common;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: darken($white, 2.5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
&:not(:active) {
|
||||||
|
box-shadow: 0 0 0 0.125em rgba($white, 0.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: darken($white, 5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[disabled] {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-footer & {
|
||||||
|
@include dp-footer-button-common;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-switch {
|
||||||
|
flex: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prev-btn,
|
||||||
|
.next-btn {
|
||||||
|
padding-right: 0.375rem;
|
||||||
|
padding-left: 0.375rem;
|
||||||
|
width: $dp-cell-size-base;
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-view {
|
||||||
|
@extend %flex-container;
|
||||||
|
|
||||||
|
.days-of-week {
|
||||||
|
@extend %flex-container;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dow {
|
||||||
|
@extend %flex-basis-day;
|
||||||
|
height: $dp-font-size-normal * $dp-line-height-base;
|
||||||
|
line-height: $dp-font-size-normal * $dp-line-height-base;
|
||||||
|
font-size: ($dp-font-size-small + $dp-font-size-normal) / 2;
|
||||||
|
font-weight: $dp-font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.week {
|
||||||
|
@extend %datepicker-cell-height;
|
||||||
|
width: $dp-cell-size-base;
|
||||||
|
color: $dp-week-color;
|
||||||
|
font-size: $dp-font-size-small;
|
||||||
|
|
||||||
|
@media (max-width: $dp-cell-shrink-threshold) {
|
||||||
|
width: $dp-cell-shrinked-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-grid {
|
||||||
|
@extend %flex-container;
|
||||||
|
@extend %flex-wrap;
|
||||||
|
|
||||||
|
width: $dp-cell-size-base * 7;
|
||||||
|
|
||||||
|
@media (max-width: $dp-cell-shrink-threshold) {
|
||||||
|
.calendar-weeks + .days & {
|
||||||
|
width: $dp-cell-shrinked-width * 7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-cell {
|
||||||
|
@extend %datepicker-cell-height;
|
||||||
|
|
||||||
|
&:not(.disabled):hover {
|
||||||
|
background-color: darken($dp-background-color, 2.5%);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.focused:not(.selected) {
|
||||||
|
background-color: $dp-cell-focus-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
&,
|
||||||
|
&:hover {
|
||||||
|
background-color: $dp-cell-selected-background-color;
|
||||||
|
color: $dp-cell-selected-color;
|
||||||
|
font-weight: $dp-cell-selected-font-weight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
color: $dp-cell-disabled-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.prev,
|
||||||
|
&.next {
|
||||||
|
&:not(.disabled) {
|
||||||
|
color: $dp-cell-prevnext-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
color: darken($dp-cell-selected-color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.highlighted:not(.selected):not(.today) {
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: $dp-cell-highlighted-background-color;
|
||||||
|
|
||||||
|
&:not(.disabled):hover {
|
||||||
|
background-color: darken($dp-cell-highlighted-background-color, 2.5%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.focused {
|
||||||
|
background-color: $dp-cell-focus-background-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.today {
|
||||||
|
&:not(.selected) {
|
||||||
|
background-color: $dp-cell-today-background-color;
|
||||||
|
|
||||||
|
&:not(.disabled) {
|
||||||
|
color: $dp-cell-today-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.focused:not(.selected) {
|
||||||
|
background-color: darken($dp-cell-today-background-color, 2.5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-view .days & {
|
||||||
|
@extend %flex-basis-day;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-view.datepicker-grid & {
|
||||||
|
@extend %flex-basis-month-year;
|
||||||
|
height: $dp-cell-size-base * 2;
|
||||||
|
line-height: $dp-cell-size-base * 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-input.in-edit {
|
||||||
|
border-color: $dp-input-in-edit-border-color;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
box-shadow: $dp-input-in-edit-focus-box-shadow-size rgba($dp-input-in-edit-border-color, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue