diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo/components/_calendar.scss')
-rw-r--r-- | WebContent/VAADIN/themes/valo/components/_calendar.scss | 546 |
1 files changed, 546 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_calendar.scss b/WebContent/VAADIN/themes/valo/components/_calendar.scss new file mode 100644 index 0000000000..6429a2f163 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_calendar.scss @@ -0,0 +1,546 @@ +$v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateblue !default; + + +@mixin v-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; + } +} + + + + + + + + +@mixin v-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 v-valo-calendar-prev-style; + } + + .#{$primary-stylename}-header-week .#{$primary-stylename}-next { + @include v-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-valo-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-app-background-color, 3%); + cursor: pointer; + + &:hover { + color: v-valo-focus-color(); + } + } + + .#{$primary-stylename}-month-day-today { + background: blend-normal(rgba(v-valo-focus-color(), .05), $v-app-background-color); + + .#{$primary-stylename}-day-number { + font-weight: $v-font-weight + 100; + color: v-valo-focus-color(); + border-top: 2px solid v-valo-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-valo-selection-color(), .1), $v-app-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-app-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; + + //&:first-child { + // width: round($v-unit-size*1.5); + //} + } + + .#{$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; + //@include box-sizing(border-box); + //padding: 0 round($v-unit-size/8); + border-right: 1px solid transparent; + + &:focus { + outline: none; + } + } + + $v-valo-calendar-time-divider-color: darken($v-app-background-color, 5%); + + .#{$primary-stylename} .v-datecellslot, + .#{$primary-stylename} .v-datecellslot-even { + border-top: 1px solid $v-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-valo-focus-color(); + line-height: 1px; + pointer-events: none; + @include opacity(.5); + + &:before { + content: "\2022"; + color: v-valo-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-valo-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 { + //box-shadow: v-valo-shadow(); + } + } + + .#{$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); + //margin-left: 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-app-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; + } + +} + + +@mixin v-valo-calendar-prev-style { + &:before { + @include v-valo-tabsheet-scroller-prev-icon-style; + } +} + +@mixin v-valo-calendar-next-style { + &:before { + @include v-valo-tabsheet-scroller-next-icon-style; + } +} |