diff options
Diffstat (limited to 'WebContent/VAADIN')
| -rw-r--r-- | WebContent/VAADIN/themes/base/base.scss | 2 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/base/calendar/calendar.scss | 378 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/base/calendar/img/arrows.png | bin | 0 -> 248 bytes | |||
| -rw-r--r-- | WebContent/VAADIN/themes/tests-calendar/styles.css | 96 |
4 files changed, 476 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss index 87754b6777..83e463fa00 100644 --- a/WebContent/VAADIN/themes/base/base.scss +++ b/WebContent/VAADIN/themes/base/base.scss @@ -4,6 +4,7 @@ @import "button/nativebutton.scss"; @import "button/checkbox.scss"; @import "layout/layout.scss"; +@import "calendar/calendar.scss"; @import "caption/caption.scss"; @import "colorpicker/colorpicker.scss"; @import "common/common.scss"; @@ -64,6 +65,7 @@ $line-height: normal; @include base-checkbox; @include base-caption; @include base-colorpicker; + @include base-calendar; // here for now to preserve old semantics @include base-common; diff --git a/WebContent/VAADIN/themes/base/calendar/calendar.scss b/WebContent/VAADIN/themes/base/calendar/calendar.scss new file mode 100644 index 0000000000..8ff97df0f9 --- /dev/null +++ b/WebContent/VAADIN/themes/base/calendar/calendar.scss @@ -0,0 +1,378 @@ +@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; +} + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/calendar/img/arrows.png b/WebContent/VAADIN/themes/base/calendar/img/arrows.png Binary files differnew file mode 100644 index 0000000000..9905c0b065 --- /dev/null +++ b/WebContent/VAADIN/themes/base/calendar/img/arrows.png diff --git a/WebContent/VAADIN/themes/tests-calendar/styles.css b/WebContent/VAADIN/themes/tests-calendar/styles.css new file mode 100644 index 0000000000..7a37fcfdaf --- /dev/null +++ b/WebContent/VAADIN/themes/tests-calendar/styles.css @@ -0,0 +1,96 @@ +@import url(../reindeer/legacy-styles.css); + +.v-app { + background: #fff; + } + + +/** Customized phase colors*/ + + +/** + * Green + */ + +/* For month view */ +.v-calendar .v-calendar-event-color1 { + color: #4f8324; + } +.v-calendar .v-calendar-event-color1-all-day { + background-color: #61c114; + } + +/* For week/day view */ +.v-calendar .v-calendar-event-color1 .v-calendar-event-caption { + color: #4f8324; + } +.v-calendar .v-calendar-event-color1 .v-calendar-event-content { + border-color: #61c114; + background-color: #daff70; + } + + +/** + * Blue + */ + +/* For month view */ +.v-calendar .v-calendar-event-color2 { + color: #1c4b8b; + } +.v-calendar .v-calendar-event-color2-all-day { + background-color: #0a56bc; + } + +/* For week/day view */ +.v-calendar .v-calendar-event-color2 .v-calendar-event-caption { + color: #1c4b8b; + } +.v-calendar .v-calendar-event-color2 .v-calendar-event-content { + border-color: #0a56bc; + background-color: #529bff; + } + + +/** + * Red + */ + +/* For month view */ +.v-calendar .v-calendar-event-color3 { + color: #831d1d; + } +.v-calendar .v-calendar-event-color3-all-day { + background-color: #bd1a1a; + } + +/* For week/day view */ +.v-calendar .v-calendar-event-color3 .v-calendar-event-caption { + color: #831d1d; + } +.v-calendar .v-calendar-event-color3 .v-calendar-event-content { + border-color: #bd1a1a; + background-color: #ff9d9d; + } + + +/** + * Orange + */ + +/* For month view */ +.v-calendar .v-calendar-event-color4 { + color: #8b5923; + } +.v-calendar .v-calendar-event-color4-all-day { + background-color: #cd6a00; + } + +/* For week/day view */ +.v-calendar .v-calendar-event-color4 .v-calendar-event-caption { + color: #8b5923; + } +.v-calendar .v-calendar-event-color4 .v-calendar-event-content { + border-color: #cd6a00; + background-color: #faa345; + }
\ No newline at end of file |
