| @mixin base-calendar($primaryStyleName : v-calendar) { |
| |
| /* Global resize style */ |
| .#{$primaryStyleName}-nresize DIV DIV { |
| cursor: n-resize !important; |
| } |
| |
| .#{$primaryStyleName}-sresize DIV DIV { |
| cursor: s-resize !important; |
| } |
| |
| /* Header bar */ |
| .#{$primaryStyleName} { |
| background-color: #fff; |
| } |
| |
| .#{$primaryStyleName}-header-month,.#{$primaryStyleName}-header-week { |
| border-bottom: 1px solid #c1c1c1; |
| } |
| |
| .#{$primaryStyleName}-header-day { |
| text-align: center; |
| color: #666; |
| font-size: 12px; |
| line-height: normal; |
| } |
| |
| .#{$primaryStyleName}-header-week .#{$primaryStyleName}-header-day:hover { |
| cursor: pointer; |
| color: #222 |
| } |
| |
| .#{$primaryStyleName}-header-day-today { |
| font-weight: bold; |
| color: #444; |
| } |
| |
| .#{$primaryStyleName}-header-month td:first-child { |
| padding-left: 19px; |
| /* Same as VCalendar.MONTHLY_WEEKTOOLBARWIDTH - .#{$primaryStyleName}-week-numbers border */ |
| } |
| |
| .#{$primaryStyleName}-header-week .#{$primaryStyleName}-back,.#{$primaryStyleName}-header-week .#{$primaryStyleName}-next |
| { |
| border: none; |
| padding: 0; |
| margin: 0; |
| height: 12px; |
| width: 12px; |
| overflow: hidden; |
| background: transparent url(img/arrows.png) no-repeat 50% 0; |
| opacity: .3; |
| filter: alpha(opacity = 30); |
| cursor: default; |
| } |
| |
| .#{$primaryStyleName}-header-week .#{$primaryStyleName}-back:hover,.#{$primaryStyleName}-header-week .#{$primaryStyleName}-next:hover |
| { |
| opacity: .6; |
| filter: alpha(opacity = 60); |
| } |
| |
| .#{$primaryStyleName}-header-week .#{$primaryStyleName}-back:active,.#{$primaryStyleName}-header-week .#{$primaryStyleName}-next:active |
| { |
| opacity: 1; |
| filter: alpha(opacity = 100); |
| } |
| |
| .#{$primaryStyleName}-header-week .#{$primaryStyleName}-next { |
| background-position: 50% -12px; |
| } |
| |
| /* Month grid */ |
| .#{$primaryStyleName}-month { |
| outline: none; |
| } |
| |
| .#{$primaryStyleName}-week-numbers { |
| width: 20px; |
| border-right: 1px solid #ccc; |
| } |
| |
| .#{$primaryStyleName}-week-number { |
| border: none; |
| background: transparent; |
| padding: 0; |
| margin: 0; |
| cursor: pointer; |
| opacity: .5; |
| width: 20px; |
| text-align: center; |
| border-bottom: 1px solid #ddd; |
| } |
| |
| .#{$primaryStyleName}-week-number:hover { |
| opacity: 1; |
| } |
| |
| .#{$primaryStyleName}-month-day { |
| border-bottom: 1px solid #ccc; |
| border-right: 1px solid #ccc; |
| outline: none; |
| } |
| |
| .#{$primaryStyleName}-month-day-today { |
| background-color: #e7f0f5; |
| } |
| |
| .#{$primaryStyleName}-month-day-selected { |
| background-color: #fffee7; |
| } |
| |
| .#{$primaryStyleName}-month-day-dragemphasis { |
| background-color: #a8a8a8; |
| } |
| |
| .#{$primaryStyleName}-month-day-scrollable { |
| overflow-y: scroll; |
| } |
| |
| .#{$primaryStyleName}-day-number { |
| height: 18px; |
| line-height: 18px; |
| font-size: 12px; |
| text-align: right; |
| padding-right: 3px; |
| white-space: nowrap; |
| } |
| |
| .#{$primaryStyleName}-day-number:hover { |
| cursor: pointer; |
| opacity: .6; |
| filter: alpha(opacity = 60); |
| } |
| |
| .#{$primaryStyleName}-month .#{$primaryStyleName}-spacer,.#{$primaryStyleName}-month .#{$primaryStyleName}-bottom-spacer,.#{$primaryStyleName}-month .#{$primaryStyleName}-bottom-spacer-empty |
| { |
| /* Bottom spacer is used in GWT to measure the event height (offsetHeight) */ |
| height: 15px; |
| font-size: 11px; |
| } |
| |
| .#{$primaryStyleName}-month .#{$primaryStyleName}-bottom-spacer:hover { |
| cursor: pointer; |
| opacity: .6; |
| filter: alpha(opacity = 60); |
| } |
| |
| .#{$primaryStyleName}-event { |
| line-height: 14px; |
| font-size: 11px; |
| padding: 0 0 0 4px; |
| cursor: pointer; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| |
| outline: none; |
| } |
| |
| .#{$primaryStyleName}-event-month { |
| margin-bottom: 1px; |
| white-space: nowrap; |
| } |
| |
| .#{$primaryStyleName}-event-month:hover { |
| text-decoration: underline; |
| } |
| |
| .#{$primaryStyleName}-event-all-day { |
| background: #999; |
| display: block; |
| margin-left: -2px; |
| } |
| |
| div.#{$primaryStyleName}-event-all-day { |
| color: #fff; |
| height: 14px; |
| } |
| |
| .#{$primaryStyleName}-event-continued-from { |
| margin-left: 0; |
| } |
| |
| .#{$primaryStyleName}-event-start { |
| -webkit-border-top-left-radius: 6px; |
| -webkit-border-bottom-left-radius: 6px; |
| -moz-border-radius-topleft: 6px; |
| -moz-border-radius-bottomleft: 6px; |
| border-top-left-radius: 6px; |
| border-bottom-left-radius: 6px; |
| margin-left: 0; |
| } |
| |
| .#{$primaryStyleName}-event-end { |
| -webkit-border-top-right-radius: 6px; |
| -webkit-border-bottom-right-radius: 6px; |
| -moz-border-radius-topright: 6px; |
| -moz-border-radius-bottomright: 6px; |
| border-top-right-radius: 6px; |
| border-bottom-right-radius: 6px; |
| } |
| |
| /* Week/day view */ |
| .#{$primaryStyleName}-week-wrapper { |
| position: relative; |
| } |
| |
| /*.v-ie7 .#{$primaryStyleName}-week-wrapper TABLE{ |
| table-layout: fixed; |
| }*/ |
| .#{$primaryStyleName}-times { |
| width: 51px; |
| } |
| |
| .#{$primaryStyleName}-time { |
| padding: 0 8px 7px 0; |
| margin-top: -7px; |
| text-align: right; |
| font-size: 11px; |
| color: #666; |
| border-right: 1px solid #ccc; |
| } |
| |
| .#{$primaryStyleName}-weekly-longevents { |
| border-left: 1px solid #ccc; |
| border-bottom: 2px solid #bbb; |
| margin-left: 50px; |
| } |
| |
| .#{$primaryStyleName}-weekly-longevents .#{$primaryStyleName}-datecell { |
| border-right: 1px solid #ccc; |
| padding: 1px 0 0; |
| } |
| |
| .#{$primaryStyleName}-weekly-longevents .#{$primaryStyleName}-event { |
| height: 14px; |
| margin-bottom: 1px; |
| } |
| |
| .#{$primaryStyleName}-weekly-longevents .#{$primaryStyleName}-event:hover { |
| text-decoration: underline; |
| } |
| |
| .#{$primaryStyleName}-day-times { |
| border-right: 1px solid #ccc; |
| outline: none; |
| } |
| |
| .#{$primaryStyleName}-day-times .v-datecellslot,.#{$primaryStyleName}-day-times .v-datecellslot-even { |
| border-bottom: 1px solid #ccc; |
| } |
| |
| .#{$primaryStyleName}-day-times .v-datecellslot-even { |
| border-bottom-color: #eee; |
| } |
| |
| .#{$primaryStyleName}-day-times .v-daterange { |
| background-color: #a8a8a8; |
| } |
| |
| .#{$primaryStyleName}-day-times .v-reserved { |
| background-color: #FF3333; |
| } |
| |
| .#{$primaryStyleName}-day-times .dragemphasis { |
| background-color: #a8a8a8; |
| } |
| |
| .#{$primaryStyleName}-week-wrapper .#{$primaryStyleName}-event { |
| padding: 0; |
| -webkit-border-radius: 4px; |
| -moz-border-radius: 4px; |
| border-radius: 4px; |
| margin-top: -1px; |
| } |
| |
| .#{$primaryStyleName}-event-caption { |
| position: absolute; |
| z-index: 1; |
| top: 2px; |
| left: 4px; |
| width: 100%; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| line-height: normal; |
| } |
| |
| .#{$primaryStyleName}-event-content { |
| -webkit-border-radius: 4px; |
| -moz-border-radius: 4px; |
| border-radius: 4px; |
| border: 1px solid #777; |
| background: #eee; |
| opacity: .8; |
| filter: alpha(opacity = 80); |
| height: 14px; /* "min-height" */ |
| } |
| |
| .#{$primaryStyleName}-current-time { |
| position: absolute; |
| left: 0; |
| width: 100%; |
| height: 1px; |
| overflow: hidden; |
| background: #5a6c86; |
| opacity: .6; |
| filter: alpha(opacity = 60); |
| z-index: 2; |
| } |
| |
| .#{$primaryStyleName}-event-resizetop { |
| position: absolute; |
| cursor: n-resize; |
| height: 5%; |
| min-height: 3px; |
| top: 0; |
| width: 100%; |
| z-index: 1; |
| } |
| |
| .#{$primaryStyleName}-event-resizebottom { |
| position: absolute; |
| cursor: s-resize; |
| height: 5%; |
| min-height: 3px; |
| bottom: 0; |
| width: 100%; |
| z-index: 1; |
| } |
| |
| .#{$primaryStyleName}-month-sizedheight .#{$primaryStyleName}-month-day { |
| height: 100px; |
| } |
| |
| .#{$primaryStyleName}-month-sizedwidth .#{$primaryStyleName}-month-day { |
| width: 100px; |
| } |
| |
| .#{$primaryStyleName}-header-month-Hsized .#{$primaryStyleName}-header-day { |
| width: 101px; |
| } |
| |
| /* for others */ |
| .#{$primaryStyleName}-header-month-Hsized td:first-child { |
| padding-left: 21px; |
| } |
| |
| .#{$primaryStyleName}-header-day-Hsized { |
| width: 200px; |
| } |
| |
| .#{$primaryStyleName}-week-numbers-Vsized .#{$primaryStyleName}-week-number { |
| height: 100px; |
| line-height: 100px; |
| } |
| |
| .#{$primaryStyleName}-week-wrapper-Vsized { |
| height: 400px; |
| overflow-x: hidden !important; |
| } |
| |
| .#{$primaryStyleName}-times-Vsized .#{$primaryStyleName}-time { |
| height: 38px; |
| } |
| |
| .#{$primaryStyleName}-times-Hsized .#{$primaryStyleName}-time { |
| width: 42px; |
| } |
| |
| .#{$primaryStyleName}-day-times-Vsized .v-datecellslot,.#{$primaryStyleName}-day-times-Vsized .v-datecellslot-even { |
| height: 18px; |
| } |
| |
| .#{$primaryStyleName}-day-times-Hsized, .#{$primaryStyleName}-day-times-Hsized .v-datecellslot,.#{$primaryStyleName}-day-times-Hsized .v-datecellslot-even { |
| width: 200px; |
| } |
| |
| } |