annotate bootstrap-year-calendar/bootstrap-year-calendar.css @ 103:4043aaa41075

add bootstrap-year-calendar
author paulo
date Thu, 07 Mar 2019 00:52:02 -0800
parents
children
rev   line source
paulo@103 1 /* =========================================================
paulo@103 2 * Bootstrap year calendar v1.1.0
paulo@103 3 * Repo: https://github.com/Paul-DS/bootstrap-year-calendar
paulo@103 4 * =========================================================
paulo@103 5 * Created by Paul David-Sivelle
paulo@103 6 *
paulo@103 7 * Licensed under the Apache License, Version 2.0 (the "License");
paulo@103 8 * you may not use this file except in compliance with the License.
paulo@103 9 * You may obtain a copy of the License at
paulo@103 10 *
paulo@103 11 * http://www.apache.org/licenses/LICENSE-2.0
paulo@103 12 *
paulo@103 13 * Unless required by applicable law or agreed to in writing, software
paulo@103 14 * distributed under the License is distributed on an "AS IS" BASIS,
paulo@103 15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
paulo@103 16 * See the License for the specific language governing permissions and
paulo@103 17 * limitations under the License.
paulo@103 18 * ========================================================= */
paulo@103 19
paulo@103 20 /* Main */
paulo@103 21 .calendar {
paulo@103 22 padding: 4px;
paulo@103 23 -webkit-border-radius: 4px;
paulo@103 24 -moz-border-radius: 4px;
paulo@103 25 border-radius: 4px;
paulo@103 26 overflow: auto;
paulo@103 27 direction: ltr;
paulo@103 28
paulo@103 29 -webkit-touch-callout: none;
paulo@103 30 -webkit-user-select: none;
paulo@103 31 -khtml-user-select: none;
paulo@103 32 -moz-user-select: none;
paulo@103 33 -ms-user-select: none;
paulo@103 34 user-select: none;
paulo@103 35 }
paulo@103 36
paulo@103 37 .calendar.calendar-rtl {
paulo@103 38 direction: rtl;
paulo@103 39 }
paulo@103 40 .calendar.calendar-rtl table tr td span {
paulo@103 41 float: right;
paulo@103 42 }
paulo@103 43
paulo@103 44 .calendar table {
paulo@103 45 margin: auto;
paulo@103 46 }
paulo@103 47
paulo@103 48 .calendar table td,
paulo@103 49 .calendar table th {
paulo@103 50 text-align: center;
paulo@103 51 width: 20px;
paulo@103 52 height: 20px;
paulo@103 53 border: none;
paulo@103 54 padding: 4px 5px;
paulo@103 55 font-size:12px;
paulo@103 56 }
paulo@103 57
paulo@103 58 /* Header */
paulo@103 59 .calendar .calendar-header
paulo@103 60 {
paulo@103 61 width:100%;
paulo@103 62 margin-bottom:20px;
paulo@103 63 }
paulo@103 64
paulo@103 65 .calendar .calendar-header table
paulo@103 66 {
paulo@103 67 width:100%;
paulo@103 68 }
paulo@103 69
paulo@103 70 .calendar .calendar-header table th
paulo@103 71 {
paulo@103 72 font-size:22px;
paulo@103 73 padding:5px 10px;
paulo@103 74 }
paulo@103 75
paulo@103 76 .calendar .calendar-header table th:hover {
paulo@103 77 background: #eeeeee;
paulo@103 78 cursor: pointer;
paulo@103 79 }
paulo@103 80
paulo@103 81 .calendar .calendar-header table th.disabled,
paulo@103 82 .calendar .calendar-header table th.disabled:hover {
paulo@103 83 background: none;
paulo@103 84 cursor: default;
paulo@103 85 color:white;
paulo@103 86 }
paulo@103 87
paulo@103 88 .calendar .calendar-header table th.prev,
paulo@103 89 .calendar .calendar-header table th.next
paulo@103 90 {
paulo@103 91 width:20px;
paulo@103 92 }
paulo@103 93
paulo@103 94 .calendar .year-title {
paulo@103 95 font-weight:bold;
paulo@103 96 text-align:center;
paulo@103 97 height:20px;
paulo@103 98 width:auto;
paulo@103 99 }
paulo@103 100
paulo@103 101 .calendar .year-neighbor
paulo@103 102 {
paulo@103 103 color:#aaaaaa;
paulo@103 104 }
paulo@103 105
paulo@103 106 .calendar .year-neighbor2
paulo@103 107 {
paulo@103 108 color:#dddddd;
paulo@103 109 }
paulo@103 110
paulo@103 111 /* Months */
paulo@103 112 .calendar .months-container {
paulo@103 113 width:100%;
paulo@103 114 display:none;
paulo@103 115 }
paulo@103 116
paulo@103 117 .calendar .month-container {
paulo@103 118 min-width:180px;
paulo@103 119 text-align:center;
paulo@103 120 height:200px;
paulo@103 121 padding:0;
paulo@103 122 }
paulo@103 123
paulo@103 124 .calendar table.month th.month-title
paulo@103 125 {
paulo@103 126 font-size:16px;
paulo@103 127 padding-bottom: 5px;
paulo@103 128 }
paulo@103 129
paulo@103 130 .calendar table.month th.day-header
paulo@103 131 {
paulo@103 132 font-size:14px;
paulo@103 133 }
paulo@103 134
paulo@103 135
paulo@103 136 .calendar table.month tr td,
paulo@103 137 .calendar table.month tr th
paulo@103 138 {
paulo@103 139 padding:0;
paulo@103 140 }
paulo@103 141
paulo@103 142 .calendar table.month td.week-number {
paulo@103 143 cursor: default;
paulo@103 144 font-weight:bold;
paulo@103 145 border-right:1px solid #eee;
paulo@103 146 padding:5px;
paulo@103 147 }
paulo@103 148
paulo@103 149 .calendar .round-left {
paulo@103 150 -webkit-border-radius: 8px 0 0 8px;
paulo@103 151 -moz-border-radius: 8px 0 0 8px;
paulo@103 152 border-radius: 8px 0 0 8px;
paulo@103 153 }
paulo@103 154
paulo@103 155 .calendar .round-right {
paulo@103 156 webkit-border-radius: 0 8px 8px 0 ;
paulo@103 157 -moz-border-radius: 0 8px 8px 0;
paulo@103 158 border-radius: 0 8px 8px 0;
paulo@103 159 }
paulo@103 160
paulo@103 161 .calendar table.month tr td .day-content {
paulo@103 162 -webkit-border-radius: 4px;
paulo@103 163 -moz-border-radius: 4px;
paulo@103 164 border-radius: 4px;
paulo@103 165 padding: 5px 6px;
paulo@103 166 }
paulo@103 167
paulo@103 168 .table-striped .calendar table.month tr td,
paulo@103 169 .table-striped .calendar table.month tr th {
paulo@103 170 background-color: transparent;
paulo@103 171 }
paulo@103 172
paulo@103 173 .calendar table.month td.day .day-content:hover {
paulo@103 174 background: rgba(0, 0, 0, 0.2);
paulo@103 175 cursor: pointer;
paulo@103 176 }
paulo@103 177 .calendar table.month tr td.old,
paulo@103 178 .calendar table.month tr td.new,
paulo@103 179 .calendar table.month tr td.old:hover,
paulo@103 180 .calendar table.month tr td.new:hover {
paulo@103 181 background: none;
paulo@103 182 cursor: default;
paulo@103 183 }
paulo@103 184 .calendar table.month tr td.disabled,
paulo@103 185 .calendar table.month tr td.disabled:hover {
paulo@103 186 color: #dddddd;
paulo@103 187 }
paulo@103 188
paulo@103 189 .calendar table.month td.day.disabled .day-content:hover {
paulo@103 190 background: none;
paulo@103 191 cursor: default;
paulo@103 192 }
paulo@103 193
paulo@103 194 .calendar table.month tr td.range .day-content {
paulo@103 195 background: rgba(0, 0, 0, 0.2);
paulo@103 196 -webkit-border-radius: 0;
paulo@103 197 -moz-border-radius: 0;
paulo@103 198 border-radius: 0;
paulo@103 199 }
paulo@103 200
paulo@103 201 .calendar table.month tr td.range.range-start .day-content {
paulo@103 202 border-top-left-radius:4px;
paulo@103 203 border-bottom-left-radius:4px;
paulo@103 204 }
paulo@103 205
paulo@103 206 .calendar table.month tr td.range.range-end .day-content {
paulo@103 207 border-top-right-radius:4px;
paulo@103 208 border-bottom-right-radius:4px;
paulo@103 209 }
paulo@103 210
paulo@103 211 .calendar-context-menu,
paulo@103 212 .calendar-context-menu .submenu {
paulo@103 213 border: 1px solid #ddd;
paulo@103 214 background-color: white;
paulo@103 215 box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
paulo@103 216 -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
paulo@103 217 position:absolute;
paulo@103 218 display:none;
paulo@103 219 }
paulo@103 220
paulo@103 221 .calendar-context-menu .item {
paulo@103 222 padding:5px 10px;
paulo@103 223 cursor:pointer;
paulo@103 224 display:table;
paulo@103 225 width:100%;
paulo@103 226 }
paulo@103 227
paulo@103 228 .calendar-context-menu .item:hover {
paulo@103 229 background:#eee;
paulo@103 230 }
paulo@103 231
paulo@103 232 .calendar-context-menu .item .content {
paulo@103 233 display:table-cell;
paulo@103 234 }
paulo@103 235
paulo@103 236 .calendar-context-menu .item span {
paulo@103 237 display:table-cell;
paulo@103 238 padding-left:10px;
paulo@103 239 text-align:right;
paulo@103 240 }
paulo@103 241
paulo@103 242 .calendar-context-menu .item span:last-child {
paulo@103 243 display:none;
paulo@103 244 }
paulo@103 245
paulo@103 246 .calendar-context-menu .submenu {
paulo@103 247 left: 100%;
paulo@103 248 margin-top: -6px;
paulo@103 249 }
paulo@103 250
paulo@103 251 .calendar-context-menu .item:hover > .submenu {
paulo@103 252 display:block;
paulo@103 253 }