123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378 |
- @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;
- }
-
- }
|