| /** |
| * A list of colors for custom event colors. Can be an empty list of you don't |
| * need any custom event colors. |
| * |
| * @example javascript |
| * // Java code |
| * // 'event' is an instance of EditableCalendarEvent |
| * event.setStyleName("color1"); // 1st color in the list |
| * event.setStyleName("color2"); // 2nd color in the list |
| * // etc. |
| * |
| * @group calendar |
| */ |
| $v-calendar-event-colors: #00ace0, #2d9f19, #d18100, #ce3812, #2d55cd !default; |
| |
| |
| /** |
| * Outputs the global selectors and properties for the Calendar component - styles which are |
| * considered mandatory for the component to work properly. |
| * |
| * @param {string} $primary-stylename (v-calendar) - the primary style name for the selectors |
| * |
| * @group calendar |
| */ |
| @mixin valo-calendar-global ($primary-stylename: v-calendar) { |
| .#{$primary-stylename}-month-day-scrollable { |
| overflow-y: scroll; |
| } |
| |
| .#{$primary-stylename}-week-wrapper { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .#{$primary-stylename}-current-time { |
| position: absolute; |
| left: 0; |
| width: 100%; |
| height: 1px; |
| background: red; |
| z-index: 2; |
| } |
| |
| .#{$primary-stylename}-event-resizetop, |
| .#{$primary-stylename}-event-resizebottom { |
| position: absolute; |
| height: 5%; |
| min-height: 3px; |
| width: 100%; |
| z-index: 1; |
| } |
| |
| .#{$primary-stylename}-event-resizetop { |
| cursor: row-resize; |
| top: 0; |
| } |
| |
| .#{$primary-stylename}-event-resizebottom { |
| cursor: row-resize; |
| bottom: 0; |
| } |
| |
| |
| // What a truckload of magic numbers! |
| // TODO Try to find out what these actually do, and how to make them dissappear |
| |
| .#{$primary-stylename}-header-month td:first-child { |
| padding-left: 20px; |
| // Same as VCalendar.MONTHLY_WEEKTOOLBARWIDTH - .#{$primary-stylename}-week-numbers border |
| } |
| |
| .#{$primary-stylename}-week-numbers { |
| //border-right: 1px solid; |
| } |
| |
| .#{$primary-stylename}-month-sizedheight .#{$primary-stylename}-month-day { |
| height: 100px; |
| } |
| |
| .#{$primary-stylename}-month-sizedwidth .#{$primary-stylename}-month-day { |
| width: 100px; |
| } |
| |
| .#{$primary-stylename}-header-month-Hsized .#{$primary-stylename}-header-day { |
| width: 101px; |
| } |
| |
| .#{$primary-stylename}-header-month-Hsized td:first-child { |
| padding-left: 21px; |
| } |
| |
| .#{$primary-stylename}-header-day-Hsized { |
| width: 200px; |
| } |
| |
| .#{$primary-stylename}-week-numbers-Vsized .#{$primary-stylename}-week-number { |
| height: 100px; |
| line-height: 100px; |
| } |
| |
| .#{$primary-stylename}-week-wrapper-Vsized { |
| height: 400px; |
| overflow-x: hidden !important; |
| } |
| |
| .#{$primary-stylename}-times-Vsized .#{$primary-stylename}-time { |
| height: 38px; |
| } |
| |
| .#{$primary-stylename}-times-Hsized .#{$primary-stylename}-time { |
| width: 42px; |
| } |
| |
| .#{$primary-stylename}-day-times-Vsized .v-datecellslot, |
| .#{$primary-stylename}-day-times-Vsized .v-datecellslot-even { |
| height: 18px; |
| } |
| |
| .#{$primary-stylename}-day-times-Hsized, |
| .#{$primary-stylename}-day-times-Hsized .v-datecellslot, |
| .#{$primary-stylename}-day-times-Hsized .v-datecellslot-even { |
| width: 200px; |
| } |
| } |
| |
| |
| /** |
| * Outputs the selectors and properties for the Calendar component. |
| * |
| * @param {string} $primary-stylename (v-calendar) - the primary style name for the selectors |
| * |
| * @group calendar |
| */ |
| @mixin valo-calendar ($primary-stylename: v-calendar) { |
| |
| |
| .#{$primary-stylename}-header-day { |
| font-weight: $v-font-weight + 100; |
| text-align: center; |
| padding: round($v-unit-size/5) 0; |
| } |
| |
| // Prev/next week buttons |
| .#{$primary-stylename}-header-week .#{$primary-stylename}-back, |
| .#{$primary-stylename}-header-week .#{$primary-stylename}-next { |
| @include appearance(none); |
| background: transparent; |
| border: none; |
| padding: 0; |
| margin: 0; |
| cursor: pointer; |
| outline: none; |
| color: inherit; |
| @include opacity(.5); |
| |
| &:focus { |
| outline: none; |
| } |
| |
| &:hover { |
| @include opacity(1); |
| } |
| |
| &:active { |
| @include opacity(.5); |
| } |
| } |
| |
| .#{$primary-stylename}-header-week .#{$primary-stylename}-back { |
| @include valo-calendar-prev-style; |
| } |
| |
| .#{$primary-stylename}-header-week .#{$primary-stylename}-next { |
| @include valo-calendar-next-style; |
| } |
| |
| |
| |
| |
| |
| |
| |
| |
| // Month grid |
| |
| .#{$primary-stylename}-month { |
| outline: none; |
| overflow: hidden; |
| |
| td { |
| vertical-align: top; |
| } |
| } |
| |
| .#{$primary-stylename}-week-number { |
| cursor: pointer; |
| width: 20px; // Same as VCalendar.MONTHLY_WEEKTOOLBARWIDTH |
| text-align: center; |
| font-size: 0.8em; |
| @include opacity(.5); |
| |
| &:hover { |
| @include opacity(1); |
| } |
| } |
| |
| .#{$primary-stylename}-month-day { |
| outline: none; |
| @include box-sizing(border-box); |
| line-height: 1.2; |
| } |
| |
| .#{$primary-stylename}-month tr:not(:first-child) .#{$primary-stylename}-month-day { |
| //width: auto !important; |
| } |
| |
| .#{$primary-stylename}-bottom-spacer, |
| .#{$primary-stylename}-spacer, |
| .#{$primary-stylename}-bottom-spacer-empty { |
| height: round($v-font-size * 1.2); |
| margin-bottom: round($v-unit-size/12); |
| } |
| |
| .#{$primary-stylename}-bottom-spacer { |
| font-size: 0.8em; |
| padding: 0 round($v-unit-size/8); |
| cursor: pointer; |
| |
| &:hover { |
| color: $v-focus-color; |
| } |
| } |
| |
| .#{$primary-stylename}-day-number { |
| line-height: round($v-unit-size/1.5); |
| font-size: $v-font-size; |
| text-align: right; |
| margin: 0 round($v-unit-size/8); |
| white-space: nowrap; |
| border-top: 1px solid darken($v-background-color, 3%); |
| cursor: pointer; |
| |
| &:hover { |
| color: $v-focus-color; |
| } |
| } |
| |
| .#{$primary-stylename}-month-day-today { |
| background: blend-normal(rgba($v-focus-color, .05), $v-background-color); |
| |
| .#{$primary-stylename}-day-number { |
| font-weight: $v-font-weight + 100; |
| color: $v-focus-color; |
| border-top: 2px solid $v-focus-color; |
| line-height: round($v-unit-size/1.5) - 1px; |
| margin: 0; |
| padding: 0 round($v-unit-size/8); |
| } |
| } |
| |
| .#{$primary-stylename}-month-day-selected { |
| background-color: blend-normal(rgba($v-selection-color, .1), $v-background-color); |
| } |
| |
| .#{$primary-stylename}-month-day-dragemphasis { |
| background-color: #a8a8a8; |
| } |
| |
| .#{$primary-stylename}-month-day-scrollable { |
| overflow-y: scroll; |
| } |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| // Week/day view |
| |
| $_times-column-width: 50px; // Seems to be a fixed number |
| |
| .#{$primary-stylename}-weekly-longevents { |
| margin-left: $_times-column-width; // Seems to be a fixed number |
| border-bottom: round($v-unit-size/12) solid darken($v-background-color, 10%); |
| |
| .#{$primary-stylename}-event-all-day { |
| height: round($v-font-size * 0.85 * 1.6); |
| line-height: 1.6; |
| margin-bottom: round($v-unit-size/12); |
| } |
| } |
| |
| .#{$primary-stylename}-header-week td { |
| vertical-align: middle !important; |
| } |
| |
| .#{$primary-stylename}-header-week .#{$primary-stylename}-header-day { |
| cursor: pointer; |
| } |
| |
| .#{$primary-stylename}-times { |
| width: $_times-column-width; |
| font-size: 0.77em; |
| line-height: 1; |
| white-space: nowrap; |
| } |
| |
| .#{$primary-stylename}-time { |
| text-align: right; |
| padding-right: round($v-unit-size/4); |
| margin-top: round($v-font-size*0.8/-2); |
| padding-bottom: round($v-font-size*0.8/2); |
| } |
| |
| .#{$primary-stylename}-day-times, |
| .#{$primary-stylename}-day-times-today { |
| outline: none; |
| border-right: 1px solid transparent; |
| |
| &:focus { |
| outline: none; |
| } |
| } |
| |
| $valo-calendar-time-divider-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); |
| |
| .#{$primary-stylename} .v-datecellslot, |
| .#{$primary-stylename} .v-datecellslot-even { |
| border-top: 1px solid $valo-calendar-time-divider-color; |
| |
| &:first-child { |
| border-top-color: transparent; |
| } |
| } |
| |
| .#{$primary-stylename} .v-datecellslot { |
| border-top-style: dotted; |
| } |
| |
| .#{$primary-stylename} .v-datecellslot, |
| .#{$primary-stylename} .v-datecellslot-even { |
| margin-right: round($v-unit-size/8); |
| } |
| |
| .#{$primary-stylename}-current-time { |
| background: $v-focus-color; |
| line-height: 1px; |
| pointer-events: none; |
| @include opacity(.5); |
| |
| &:before { |
| content: "\2022"; |
| color: $v-focus-color; |
| font-size: 22px; |
| margin-left: -0.07em; |
| } |
| } |
| |
| .#{$primary-stylename} .v-daterange { |
| position: relative; |
| |
| &:before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: -1px; |
| left: 0; |
| background: $v-selection-color; |
| @include opacity(.5); |
| @if $v-border-radius > 0 { |
| border-radius: $v-border-radius $v-border-radius 0 0; |
| } |
| } |
| |
| + .v-daterange { |
| border-color: transparent; |
| |
| &:before { |
| @if $v-border-radius > 0 { |
| border-radius: 0; |
| } |
| } |
| } |
| } |
| |
| |
| |
| |
| // Event styles |
| |
| .#{$primary-stylename}-event { |
| font-size: 0.85em; |
| overflow: hidden; |
| cursor: pointer; |
| outline: none; |
| border-radius: $v-border-radius; |
| |
| &:focus { |
| outline: none; |
| } |
| } |
| |
| .#{$primary-stylename}-event-month { |
| padding: 0 round($v-unit-size/8); |
| @include box-sizing(border-box); |
| margin-bottom: round($v-unit-size/12); |
| white-space: nowrap; |
| text-overflow: ellipsis; |
| height: round($v-font-size * 1.2); |
| line-height: round($v-font-size * 1.2); |
| |
| .#{$primary-stylename}-event-time { |
| float: right; |
| font-size: 0.9em; |
| line-height: round($v-font-size * 1.2); |
| @include opacity(.5); |
| } |
| |
| &:before { |
| content: "\25cf"; |
| margin-right: .2em; |
| } |
| } |
| |
| .#{$primary-stylename}-event-all-day { |
| padding: 0 round($v-unit-size/8); |
| @include box-sizing(border-box); |
| height: round($v-font-size * 1.2); |
| line-height: round($v-font-size * 1.2); |
| border-radius: 0; |
| margin-left: -1px; |
| white-space: nowrap; |
| |
| &:before { |
| content: ""; |
| } |
| } |
| |
| .#{$primary-stylename}-event-start { |
| overflow: visible; |
| margin-left: 0; |
| |
| &.#{$primary-stylename}-event-continued-to, |
| &.#{$primary-stylename}-event-end { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| } |
| |
| @if $v-border-radius > 0 { |
| .#{$primary-stylename}-event-start { |
| border-top-left-radius: $v-border-radius; |
| border-bottom-left-radius: $v-border-radius; |
| margin-left: round($v-unit-size/8); |
| } |
| .#{$primary-stylename}-event-end { |
| border-top-right-radius: $v-border-radius; |
| border-bottom-right-radius: $v-border-radius; |
| margin-right: round($v-unit-size/8); |
| } |
| } |
| |
| .#{$primary-stylename}-event-caption { |
| font-weight: $v-font-weight + 200; |
| line-height: 1.2; |
| padding: round($v-unit-size/8) 0; |
| position: absolute; |
| overflow: hidden; |
| right: round($v-unit-size/4); |
| left: round($v-unit-size/8); |
| bottom: 0; |
| top: 0; |
| |
| span { |
| font-weight: $v-font-weight; |
| white-space: nowrap; |
| } |
| } |
| |
| .#{$primary-stylename}-week-wrapper .#{$primary-stylename}-event { |
| overflow: visible; |
| |
| // Event is being dragged |
| &[style*=" left:"] .#{$primary-stylename}-event-content { |
| } |
| } |
| |
| .#{$primary-stylename}-week-wrapper .#{$primary-stylename}-event-caption { |
| |
| } |
| |
| .#{$primary-stylename}-week-wrapper .#{$primary-stylename}-event-content { |
| margin-top: -1px; |
| border-radius: $v-border-radius + 1px; |
| border: 1px solid $v-app-background-color; |
| padding-top: 3px; |
| margin-right: round($v-unit-size/8); |
| } |
| |
| |
| |
| |
| |
| |
| |
| // Custom event colors |
| |
| @for $i from 1 through length($v-calendar-event-colors) { |
| $color: nth($v-calendar-event-colors, $i); |
| $bg: blend-normal(rgba($color, .2), $v-background-color); |
| |
| // First color is considered the default color (and stylename 'color1' will equal to that) |
| $stylename: if($i == 1, '', '[class*="color#{$i}"]'); |
| |
| .#{$primary-stylename}-event-month#{$stylename}:before { |
| color: $color; |
| } |
| |
| .#{$primary-stylename}-event-all-day#{$stylename} { |
| background-color: $bg; |
| background-color: rgba($bg, .8); |
| color: $color; |
| } |
| |
| .#{$primary-stylename}-week-wrapper .#{$primary-stylename}-event#{$stylename} { |
| color: $color; |
| |
| .#{$primary-stylename}-event-content { |
| background-color: $bg; |
| background-color: rgba($bg, .8); |
| } |
| } |
| } |
| |
| |
| |
| .#{$primary-stylename}.v-disabled * { |
| cursor: default; |
| } |
| |
| } |
| |
| |
| /** |
| * Outputs the styles for the previous button. |
| * |
| * @group calendar |
| */ |
| @mixin valo-calendar-prev-style { |
| &:before { |
| @include valo-tabsheet-scroller-prev-icon-style; |
| } |
| } |
| |
| |
| /** |
| * Outputs the styles for the next button. |
| * |
| * @group calendar |
| */ |
| @mixin valo-calendar-next-style { |
| &:before { |
| @include valo-tabsheet-scroller-next-icon-style; |
| } |
| } |