paulo@103: /* ========================================================= paulo@103: * Bootstrap year calendar v1.1.0 paulo@103: * Repo: https://github.com/Paul-DS/bootstrap-year-calendar paulo@103: * ========================================================= paulo@103: * Created by Paul David-Sivelle paulo@103: * paulo@103: * Licensed under the Apache License, Version 2.0 (the "License"); paulo@103: * you may not use this file except in compliance with the License. paulo@103: * You may obtain a copy of the License at paulo@103: * paulo@103: * http://www.apache.org/licenses/LICENSE-2.0 paulo@103: * paulo@103: * Unless required by applicable law or agreed to in writing, software paulo@103: * distributed under the License is distributed on an "AS IS" BASIS, paulo@103: * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. paulo@103: * See the License for the specific language governing permissions and paulo@103: * limitations under the License. paulo@103: * ========================================================= */ paulo@103: paulo@103: /* Main */ paulo@103: .calendar { paulo@103: padding: 4px; paulo@103: -webkit-border-radius: 4px; paulo@103: -moz-border-radius: 4px; paulo@103: border-radius: 4px; paulo@103: overflow: auto; paulo@103: direction: ltr; paulo@103: paulo@103: -webkit-touch-callout: none; paulo@103: -webkit-user-select: none; paulo@103: -khtml-user-select: none; paulo@103: -moz-user-select: none; paulo@103: -ms-user-select: none; paulo@103: user-select: none; paulo@103: } paulo@103: paulo@103: .calendar.calendar-rtl { paulo@103: direction: rtl; paulo@103: } paulo@103: .calendar.calendar-rtl table tr td span { paulo@103: float: right; paulo@103: } paulo@103: paulo@103: .calendar table { paulo@103: margin: auto; paulo@103: } paulo@103: paulo@103: .calendar table td, paulo@103: .calendar table th { paulo@103: text-align: center; paulo@103: width: 20px; paulo@103: height: 20px; paulo@103: border: none; paulo@103: padding: 4px 5px; paulo@103: font-size:12px; paulo@103: } paulo@103: paulo@103: /* Header */ paulo@103: .calendar .calendar-header paulo@103: { paulo@103: width:100%; paulo@103: margin-bottom:20px; paulo@103: } paulo@103: paulo@103: .calendar .calendar-header table paulo@103: { paulo@103: width:100%; paulo@103: } paulo@103: paulo@103: .calendar .calendar-header table th paulo@103: { paulo@103: font-size:22px; paulo@103: padding:5px 10px; paulo@103: } paulo@103: paulo@103: .calendar .calendar-header table th:hover { paulo@103: background: #eeeeee; paulo@103: cursor: pointer; paulo@103: } paulo@103: paulo@103: .calendar .calendar-header table th.disabled, paulo@103: .calendar .calendar-header table th.disabled:hover { paulo@103: background: none; paulo@103: cursor: default; paulo@103: color:white; paulo@103: } paulo@103: paulo@103: .calendar .calendar-header table th.prev, paulo@103: .calendar .calendar-header table th.next paulo@103: { paulo@103: width:20px; paulo@103: } paulo@103: paulo@103: .calendar .year-title { paulo@103: font-weight:bold; paulo@103: text-align:center; paulo@103: height:20px; paulo@103: width:auto; paulo@103: } paulo@103: paulo@103: .calendar .year-neighbor paulo@103: { paulo@103: color:#aaaaaa; paulo@103: } paulo@103: paulo@103: .calendar .year-neighbor2 paulo@103: { paulo@103: color:#dddddd; paulo@103: } paulo@103: paulo@103: /* Months */ paulo@103: .calendar .months-container { paulo@103: width:100%; paulo@103: display:none; paulo@103: } paulo@103: paulo@103: .calendar .month-container { paulo@103: min-width:180px; paulo@103: text-align:center; paulo@103: height:200px; paulo@103: padding:0; paulo@103: } paulo@103: paulo@103: .calendar table.month th.month-title paulo@103: { paulo@103: font-size:16px; paulo@103: padding-bottom: 5px; paulo@103: } paulo@103: paulo@103: .calendar table.month th.day-header paulo@103: { paulo@103: font-size:14px; paulo@103: } paulo@103: paulo@103: paulo@103: .calendar table.month tr td, paulo@103: .calendar table.month tr th paulo@103: { paulo@103: padding:0; paulo@103: } paulo@103: paulo@103: .calendar table.month td.week-number { paulo@103: cursor: default; paulo@103: font-weight:bold; paulo@103: border-right:1px solid #eee; paulo@103: padding:5px; paulo@103: } paulo@103: paulo@103: .calendar .round-left { paulo@103: -webkit-border-radius: 8px 0 0 8px; paulo@103: -moz-border-radius: 8px 0 0 8px; paulo@103: border-radius: 8px 0 0 8px; paulo@103: } paulo@103: paulo@103: .calendar .round-right { paulo@103: webkit-border-radius: 0 8px 8px 0 ; paulo@103: -moz-border-radius: 0 8px 8px 0; paulo@103: border-radius: 0 8px 8px 0; paulo@103: } paulo@103: paulo@103: .calendar table.month tr td .day-content { paulo@103: -webkit-border-radius: 4px; paulo@103: -moz-border-radius: 4px; paulo@103: border-radius: 4px; paulo@103: padding: 5px 6px; paulo@103: } paulo@103: paulo@103: .table-striped .calendar table.month tr td, paulo@103: .table-striped .calendar table.month tr th { paulo@103: background-color: transparent; paulo@103: } paulo@103: paulo@103: .calendar table.month td.day .day-content:hover { paulo@103: background: rgba(0, 0, 0, 0.2); paulo@103: cursor: pointer; paulo@103: } paulo@103: .calendar table.month tr td.old, paulo@103: .calendar table.month tr td.new, paulo@103: .calendar table.month tr td.old:hover, paulo@103: .calendar table.month tr td.new:hover { paulo@103: background: none; paulo@103: cursor: default; paulo@103: } paulo@103: .calendar table.month tr td.disabled, paulo@103: .calendar table.month tr td.disabled:hover { paulo@103: color: #dddddd; paulo@103: } paulo@103: paulo@103: .calendar table.month td.day.disabled .day-content:hover { paulo@103: background: none; paulo@103: cursor: default; paulo@103: } paulo@103: paulo@103: .calendar table.month tr td.range .day-content { paulo@103: background: rgba(0, 0, 0, 0.2); paulo@103: -webkit-border-radius: 0; paulo@103: -moz-border-radius: 0; paulo@103: border-radius: 0; paulo@103: } paulo@103: paulo@103: .calendar table.month tr td.range.range-start .day-content { paulo@103: border-top-left-radius:4px; paulo@103: border-bottom-left-radius:4px; paulo@103: } paulo@103: paulo@103: .calendar table.month tr td.range.range-end .day-content { paulo@103: border-top-right-radius:4px; paulo@103: border-bottom-right-radius:4px; paulo@103: } paulo@103: paulo@103: .calendar-context-menu, paulo@103: .calendar-context-menu .submenu { paulo@103: border: 1px solid #ddd; paulo@103: background-color: white; paulo@103: box-shadow: 2px 2px 5px rgba(0, 0, 0, .2); paulo@103: -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, .2); paulo@103: position:absolute; paulo@103: display:none; paulo@103: } paulo@103: paulo@103: .calendar-context-menu .item { paulo@103: padding:5px 10px; paulo@103: cursor:pointer; paulo@103: display:table; paulo@103: width:100%; paulo@103: } paulo@103: paulo@103: .calendar-context-menu .item:hover { paulo@103: background:#eee; paulo@103: } paulo@103: paulo@103: .calendar-context-menu .item .content { paulo@103: display:table-cell; paulo@103: } paulo@103: paulo@103: .calendar-context-menu .item span { paulo@103: display:table-cell; paulo@103: padding-left:10px; paulo@103: text-align:right; paulo@103: } paulo@103: paulo@103: .calendar-context-menu .item span:last-child { paulo@103: display:none; paulo@103: } paulo@103: paulo@103: .calendar-context-menu .submenu { paulo@103: left: 100%; paulo@103: margin-top: -6px; paulo@103: } paulo@103: paulo@103: .calendar-context-menu .item:hover > .submenu { paulo@103: display:block; paulo@103: }