| .datepicker { |
| border-radius: @border-radius-base; |
| &-inline { |
| width: 220px; |
| } |
| direction: ltr; |
| &&-rtl { |
| direction: rtl; |
| table tr td span { |
| float: right; |
| } |
| } |
| &-dropdown { |
| top: 0; |
| left: 0; |
| padding: 4px; |
| &:before { |
| content: ''; |
| display: inline-block; |
| border-left: 7px solid transparent; |
| border-right: 7px solid transparent; |
| border-bottom: 7px solid @dropdown-border; |
| border-top: 0; |
| border-bottom-color: rgba(0,0,0,.2); |
| position: absolute; |
| } |
| &:after { |
| content: ''; |
| display: inline-block; |
| border-left: 6px solid transparent; |
| border-right: 6px solid transparent; |
| border-bottom: 6px solid @dropdown-bg; |
| border-top: 0; |
| position: absolute; |
| } |
| &.datepicker-orient-left:before { left: 6px; } |
| &.datepicker-orient-left:after { left: 7px; } |
| &.datepicker-orient-right:before { right: 6px; } |
| &.datepicker-orient-right:after { right: 7px; } |
| &.datepicker-orient-bottom:before { top: -7px; } |
| &.datepicker-orient-bottom:after { top: -6px; } |
| &.datepicker-orient-top:before { |
| bottom: -7px; |
| border-bottom: 0; |
| border-top: 7px solid @dropdown-border; |
| } |
| &.datepicker-orient-top:after { |
| bottom: -6px; |
| border-bottom: 0; |
| border-top: 6px solid @dropdown-bg; |
| } |
| } |
| table { |
| margin: 0; |
| -webkit-touch-callout: none; |
| -webkit-user-select: none; |
| -khtml-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| tr { |
| td, th { |
| text-align: center; |
| width: 30px; |
| height: 30px; |
| border-radius: 4px; |
| border: none; |
| } |
| } |
| } |
| // Inline display inside a table presents some problems with |
| // border and background colors. |
| .table-striped & table tr { |
| td, th { |
| background-color: transparent; |
| } |
| } |
| table tr td { |
| &.old, |
| &.new { |
| color: @btn-link-disabled-color; |
| } |
| &.day:hover, |
| &.focused { |
| background: @gray-lighter; |
| cursor: pointer; |
| } |
| &.disabled, |
| &.disabled:hover { |
| background: none; |
| color: @btn-link-disabled-color; |
| cursor: default; |
| } |
| &.highlighted { |
| @highlighted-bg: @state-info-bg; |
| .button-variant(#000, @highlighted-bg, darken(@highlighted-bg, 20%)); |
| border-radius: 0; |
| |
| &.focused { |
| background: darken(@highlighted-bg, 10%); |
| } |
| |
| &.disabled, |
| &.disabled:active { |
| background: @highlighted-bg; |
| color: @btn-link-disabled-color; |
| } |
| } |
| &.today { |
| @today-bg: lighten(orange, 30%); |
| .button-variant(#000, @today-bg, darken(@today-bg, 20%)); |
| |
| &.focused { |
| background: darken(@today-bg, 10%); |
| } |
| |
| &.disabled, |
| &.disabled:active { |
| background: @today-bg; |
| color: @btn-link-disabled-color; |
| } |
| } |
| &.range { |
| @range-bg: @gray-lighter; |
| .button-variant(#000, @range-bg, darken(@range-bg, 20%)); |
| border-radius: 0; |
| |
| &.focused { |
| background: darken(@range-bg, 10%); |
| } |
| |
| &.disabled, |
| &.disabled:active { |
| background: @range-bg; |
| color: @btn-link-disabled-color; |
| } |
| } |
| &.range.highlighted { |
| @range-highlighted-bg: mix(@state-info-bg, @gray-lighter, 50%); |
| .button-variant(#000, @range-highlighted-bg, darken(@range-highlighted-bg, 20%)); |
| |
| &.focused { |
| background: darken(@range-highlighted-bg, 10%); |
| } |
| |
| &.disabled, |
| &.disabled:active { |
| background: @range-highlighted-bg; |
| color: @btn-link-disabled-color; |
| } |
| } |
| &.range.today { |
| @range-today-bg: mix(orange, @gray-lighter, 50%); |
| .button-variant(#000, @range-today-bg, darken(@range-today-bg, 20%)); |
| |
| &.disabled, |
| &.disabled:active { |
| background: @range-today-bg; |
| color: @btn-link-disabled-color; |
| } |
| } |
| &.selected, |
| &.selected.highlighted { |
| .button-variant(#fff, @gray-light, @gray); |
| text-shadow: 0 -1px 0 rgba(0,0,0,.25); |
| } |
| &.active, |
| &.active.highlighted { |
| .button-variant(@btn-primary-color, @btn-primary-bg, @btn-primary-border); |
| text-shadow: 0 -1px 0 rgba(0,0,0,.25); |
| } |
| span { |
| display: block; |
| width: 23%; |
| height: 54px; |
| line-height: 54px; |
| float: left; |
| margin: 1%; |
| cursor: pointer; |
| border-radius: 4px; |
| &:hover, |
| &.focused { |
| background: @gray-lighter; |
| } |
| &.disabled, |
| &.disabled:hover { |
| background: none; |
| color: @btn-link-disabled-color; |
| cursor: default; |
| } |
| &.active, |
| &.active:hover, |
| &.active.disabled, |
| &.active.disabled:hover { |
| .button-variant(@btn-primary-color, @btn-primary-bg, @btn-primary-border); |
| text-shadow: 0 -1px 0 rgba(0,0,0,.25); |
| } |
| &.old, |
| &.new { |
| color: @btn-link-disabled-color; |
| } |
| } |
| } |
| |
| .datepicker-switch { |
| width: 145px; |
| } |
| |
| .datepicker-switch, |
| .prev, |
| .next, |
| tfoot tr th { |
| cursor: pointer; |
| &:hover { |
| background: @gray-lighter; |
| } |
| } |
| |
| // Basic styling for calendar-week cells |
| .cw { |
| font-size: 10px; |
| width: 12px; |
| padding: 0 2px 0 5px; |
| vertical-align: middle; |
| } |
| } |
| .input-group.date .input-group-addon { |
| cursor: pointer; |
| } |
| .input-daterange { |
| width: 100%; |
| input { |
| text-align: center; |
| } |
| input:first-child { |
| border-radius: 3px 0 0 3px; |
| } |
| input:last-child { |
| border-radius: 0 3px 3px 0; |
| } |
| .input-group-addon { |
| width: auto; |
| min-width: 16px; |
| padding: 4px 5px; |
| line-height: @line-height-base; |
| text-shadow: 0 1px 0 #fff; |
| border-width: 1px 0; |
| margin-left: -5px; |
| margin-right: -5px; |
| } |
| } |