summaryrefslogtreecommitdiffstats
path: root/WebContent/VAADIN/themes/valo/components/_calendar.scss
diff options
context:
space:
mode:
Diffstat (limited to 'WebContent/VAADIN/themes/valo/components/_calendar.scss')
-rw-r--r--WebContent/VAADIN/themes/valo/components/_calendar.scss546
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;
+ }
+}