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