diff options
352 files changed, 21002 insertions, 553 deletions
diff --git a/.gitignore b/.gitignore index 30c8597b16..7aae059a3e 100644 --- a/.gitignore +++ b/.gitignore @@ -40,6 +40,9 @@ /WebContent/VAADIN/themes/runo/common/img/ajax-loader-red.gif /WebContent/VAADIN/themes/runo/common/img/ajax-loader-yellow.gif +# /WebContent/VAADIN/themes/valo/ +/WebContent/VAADIN/themes/valo/styles.css + # /WebContent/VAADIN/widgetsets/ /WebContent/VAADIN/widgetsets /WebContent/VAADIN/gwt-unitCache* @@ -71,3 +74,5 @@ WebContent/VAADIN/vaadinPush.debug.js # build result folders */result result + +.sass-cache diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss index fd3c5d067d..3570c5efec 100644 --- a/WebContent/VAADIN/themes/base/base.scss +++ b/WebContent/VAADIN/themes/base/base.scss @@ -1,3 +1,4 @@ +@import "common/mixins.scss"; @import "absolutelayout/absolutelayout.scss"; @import "accordion/accordion.scss"; @import "button/button.scss"; @@ -39,7 +40,6 @@ @import "upload/upload.scss"; @import "widget/widget.scss"; @import "window/window.scss"; -@import "debug/debug.scss"; @import "browserframe/browserframe.scss"; .v-vaadin-version:after { @@ -119,5 +119,4 @@ $line-height: normal; } // always include, don't wrap in .themename{} -@include debug-globals; @include fonts; diff --git a/WebContent/VAADIN/themes/base/common/mixins.scss b/WebContent/VAADIN/themes/base/common/mixins.scss new file mode 100644 index 0000000000..79d26d6c16 --- /dev/null +++ b/WebContent/VAADIN/themes/base/common/mixins.scss @@ -0,0 +1,17 @@ +@mixin keyframes ($name) { + @-webkit-keyframes #{$name} { + @content; + } + @-moz-keyframes #{$name} { + @content; + } + @keyframes #{$name} { + @content; + } +} + +@mixin animation ($anim) { + -webkit-animation: $anim; + -moz-animation: $anim; + animation: $anim; +} diff --git a/WebContent/VAADIN/themes/base/debug/debug.scss b/WebContent/VAADIN/themes/base/debug/debug.scss deleted file mode 100644 index b50245a7be..0000000000 --- a/WebContent/VAADIN/themes/base/debug/debug.scss +++ /dev/null @@ -1,307 +0,0 @@ -/* -* Debug console related styles. NOTE that these are global, and not really part -* of a theme (the console is a sigleton). You can customize, but it will apply -* globally, e.g in a portal environment. -*/ -@mixin debug-globals { - .v-debug-console { - background: #fff; - opacity: .9; - border: 1px solid #000; - font-family: sans-serif; - } - .v-debug-console-caption { - background: #000; - border-bottom: 1px solid grey; - color: white; - font-weight: bold; - } - .v-debug-console-content { - font-size: x-small; - overflow: auto; - white-space: pre; - } - .v-debug-console-content input { - font-size: xx-small; - } - /* Debug style */ - .v-app .invalidlayout, - .v-app .invalidlayout * { - background: #f99 !important; - } - - /* NEW debug window */ - $mainbg: #fff; - $darkborder: #666; - $lightborder: #999; - $maincolor: #666; - $activecolor: #000; - - @font-face { - font-family: 'vdebugfont'; - src:url('fonts/font.eot'); - src:url('fonts/font.eot?#iefix') format('embedded-opentype'), - url('fonts/font.woff') format('woff'), - url('fonts/font.ttf') format('truetype'), - url('fonts/font.svg#fontawesome') format('svg'); - font-weight: normal; - font-style: normal; - } - - .v-debugwindow [data-icon]:before, - .v-debugwindow-menu [data-icon]:before { - font-family: 'vdebugfont'; - content: attr(data-icon); - speak: none; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - font-style: normal; - vertical-align: text-bottom; - } - - .v-debugwindow { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - - -moz-opacity: 0.8; - -webkit-opacity: 0.8; - opacity: 0.8; - color: $maincolor; - - font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; - font-size: 13px; - - .v-debugwindow-handle { - position: absolute; - bottom: 0; - background-color: #fff; - -moz-opacity: 0; - -webkit-opacity: 0; - opacity: 0; - z-index: 1000; - } - .v-debugwindow-handle-sw { - width: 7px; - height: 7px; - } - .v-debugwindow-handle-se { - right: 0; - width: 14px; - height: 14px; - } - } - .v-debugwindow:hover { - -moz-opacity: 1; - -webkit-opacity: 1; - opacity: 1; - } - .v-debugwindow * { - font-size: inherit !important; - } - - .v-debugwindow-size0, .v-debugwindow-menu .v-debugwindow-button-size0 { - font-size: 10px; - } - .v-debugwindow-size1, .v-debugwindow-menu .v-debugwindow-button-size1 { - font-size: 13px; - } - .v-debugwindow-size2, .v-debugwindow-menu .v-debugwindow-button-size2 { - font-size: 16px; - } - - .v-debugwindow-head { - text-align: right; - background-color: transparent; - } - - .v-debugwindow-tabs { - display: inline-block; - background-color: $mainbg; - } - - .v-debugwindow-tab, .v-debugwindow-controls > * { - width: 2em; - border: none; - margin: 0; - line-height: 1.5em; - background-color: $mainbg; - color: $maincolor; - } - .v-debugwindow-tab { - position: relative; - top: 1px; - border-width: 1px 0 1px 1px; - border-style: solid; - border-color: $darkborder; - border-radius: 2px 2px 0 0; - } - .v-debugwindow-tab-selected { - color: $maincolor; - background-color: $mainbg; - border-bottom: 1px solid #fff; - } - - .v-debugwindow-controls { - position: relative; - top: 1px; - display: inline-block; - background-color: $mainbg; - border: 1px solid $darkborder; - border-radius: 2px 2px 0 0; - } - - .v-debugwindow-section-head { - text-align: left; - background-color: $mainbg; - border: 1px solid $darkborder; - border-bottom: 1px solid $lightborder; - - box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); - - min-height: 1.5em; - line-height: 1.5em; - - padding-left: 5px; - } - - .v-debugwindow-button { - border: none; - background-color: transparent; - color: $maincolor; - } - .v-debugwindow-button:hover { - color: $activecolor; - text-decoration: underline; - } - .v-debugwindow-button-active { - color: $maincolor; - box-shadow: 1px 1px 3px 0 inset; - } - - .v-debugwindow-content { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - - box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); - - background-color: $mainbg; - border: 1px solid $darkborder; - border-top: none; - } - - .v-debugwindow-menu { - background-color: $mainbg; - padding: 4px; - border: 1px solid $lightborder; - border-top: none; - - border-radius: 0 0 5px 5px; - - box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); - } - .v-debugwindow-menu-content { - min-width: 100px; - } - .v-debugwindow-menu-content .v-debugwindow-button { - line-height: 22px; - } - .v-debugwindow-menu-content > div > .v-debugwindow-button { - width: 33%; - } - - /* GLOBAL color every other row */ - .v-debugwindow-row { - display: table-row; - } - .v-debugwindow-row:nth-child(odd) { - background-color: rgba(0, 61, 255, 0.11); - } - .v-debugwindow-row > span { - display: table-cell; - padding: 4px; - } - - .v-debugwindow-row.SEVERE { - color: #550000; - background-color: #FFC5C5; - } - .v-debugwindow-row.WARNING { - background-color: #FFFF99; - } - .v-debugwindow-row.FINE { - color: lighten($maincolor, 5%); - } - .v-debugwindow-row.FINER { - color: lighten($maincolor, 10%); - } - .v-debugwindow-row.FINEST { - color: lighten($maincolor, 15%); - } - .v-debugwindow-row > span.caption { - color: #999; - text-align: right; - white-space: nowrap; - } - .v-debugwindow-row > span.value { - width: 100%; - } - - .v-debugwindow-selector > span.value { - width: 100%; - } - - .v-debugwindow-selector :hover { - background: rgba(255,32,32,0.5); - } - - /* LOG */ - .v-debugwindow-log { - font-family: monospace; - - .v-debugwindow-reset { - color: #fff; - background-color: #4C92ED; - padding: 4px; - } - - .v-debugwindow-time { - text-align: right; - color: #999; - } - .v-debugwindow-message { - white-space: nowrap; - width: 100% - } - .v-debugwindow-message:hover { - white-space: normal; - word-wrap: break-word; - } - .v-debugwindow-message em { - background-color: #C4E6F8; - } - } - - /* HIERARCHY */ - .v-debugwindow-hierarchy { - .v-debugwindow-info { - padding: 1em; - } - } - - - /* NETWORK */ - .v-debugwindow-network { - .v-debugwindow-row { - display: block !important; - } - .v-debugwindow-row > span { - display: inline; - } - } - -}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/fonts/fonts.scss b/WebContent/VAADIN/themes/base/fonts/fonts.scss index 2a882ab53d..608fe7c280 100644 --- a/WebContent/VAADIN/themes/base/fonts/fonts.scss +++ b/WebContent/VAADIN/themes/base/fonts/fonts.scss @@ -3,10 +3,10 @@ } @mixin fonticons { - @include font(FontAwesome, fontawesome-webfont); + @include v-font(FontAwesome, fontawesome-webfont); } -@mixin font($font-family, $file-name) { +@mixin v-font($font-family, $file-name) { @font-face { font-family: '#{$font-family}'; src: url('#{$file-name}.eot'); @@ -23,3 +23,8 @@ display: inline-block; } } + +@mixin font($font-family, $file-name) { + @warn "The 'font' mixin is DEPRECATED. You should use the corresponding 'v-font' mixin instead."; + @include v-font($font-family, $file-name); +} diff --git a/WebContent/VAADIN/themes/base/notification/notification.scss b/WebContent/VAADIN/themes/base/notification/notification.scss index 9751422fb7..0fc7801777 100644 --- a/WebContent/VAADIN/themes/base/notification/notification.scss +++ b/WebContent/VAADIN/themes/base/notification/notification.scss @@ -7,7 +7,8 @@ overflow: hidden; padding: 1em; max-width:85%; - + opacity: .9; + filter: alpha(opacity=90); } .#{$primaryStyleName} h1, .#{$primaryStyleName} p, @@ -39,5 +40,33 @@ display: block; margin: 0; } +.#{$primaryStyleName}-animate-out { + @include animation(v-notification-animate-out 400ms); +} + +.#{$primaryStyleName} { + &.v-position-top { + top: 0; + } + &.v-position-right { + right: 0; + } + &.v-position-bottom { + bottom: 0; + } + &.v-position-left { + left: 0; + } + &.v-position-assistive { + top: -9999px; + left: -9999px; + } +} -}
\ No newline at end of file +} + +@include keyframes(v-notification-animate-out) { + 100% { + opacity: 0; + } +} diff --git a/WebContent/VAADIN/themes/tests-valo/_blueprint.scss b/WebContent/VAADIN/themes/tests-valo/_blueprint.scss new file mode 100644 index 0000000000..696da0b69e --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo/_blueprint.scss @@ -0,0 +1,20 @@ +$v-app-loading-text: "Blueprint Valo"; +$v-background-color: #1a61b7; +$v-focus-color: #fff; +$v-panel-background-color: $v-background-color; +$v-overlay-background-color: $v-background-color; +$valo-menu-background-color: $v-background-color; +$v-overlay-shadow: 0 0 0 1px rgba(#fff, .5); +$v-window-shadow: $v-overlay-shadow; +$v-window-modality-curtain-background-color: $v-background-color; +$v-bevel: false; +$v-gradient: false; +$v-shadow: false; +$v-textfield-bevel: false; +$v-textfield-shadow: false; +$v-border: 1px solid (v-tint 1.5); +$v-textfield-background-color: $v-background-color; +$v-font-family: sans-serif; +$v-font-size: 18px; + +@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo/_dark.scss b/WebContent/VAADIN/themes/tests-valo/_dark.scss new file mode 100644 index 0000000000..21bcd00ae9 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo/_dark.scss @@ -0,0 +1,18 @@ +$v-app-loading-text: "Dark Valo"; +$v-background-color: #444d50; +$v-focus-color: #07a9ca; +$v-focus-style: 0 0 3px 2px $v-focus-color; +$v-bevel-depth: 40%; +$v-gradient: v-linear 12%; +$v-border-radius: 10px; +$v-font-family: Roboto, sans-serif; +$v-font-weight: 400; +$v-font-weight--header: 400; +$v-bevel: inset 0 1px 2px v-tint, inset 0 0 1px (v-tint 0.1); +$v-shadow: 0 0 0 3px darken($v-background-color, 3%), 0 1px 1px 3px lighten($v-background-color, 5%); +$v-textfield-bevel: inset 0 2px 2px v-shade; +$v-textfield-shadow: $v-shadow; +$v-unit-size: 40px; +$v-overlay-shadow: 0 0 0 3px (v-shade 8), 0 5px 10px (v-shade 4); + +@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo/_default.scss b/WebContent/VAADIN/themes/tests-valo/_default.scss new file mode 100644 index 0000000000..c227156e2e --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo/_default.scss @@ -0,0 +1,3 @@ +$v-app-loading-text: "Default Valo"; + +@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo/_facebook.scss b/WebContent/VAADIN/themes/tests-valo/_facebook.scss new file mode 100644 index 0000000000..5b83aae4ca --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo/_facebook.scss @@ -0,0 +1,24 @@ +$v-app-loading-text: "Facebook Valo"; +$v-background-color: #fafafa; +$v-app-background-color: #e7ebf2; +$v-panel-background-color: #fff; +$v-focus-color: #3b5998; +$v-focus-style: 0 0 1px 1px rgba($v-focus-color, .5); +$v-border-radius: 3px; +$v-textfield-border-radius: 0; +$v-font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; +$v-font-size: 14px; +$v-font-color: #37404E; +$v-font-weight: 400; +$v-link-text-decoration: none; +$v-shadow: 0 1px 0 (v-shade 0.2); +$v-bevel: inset 0 1px 0 v-tint; +$v-unit-size: 30px; +$v-gradient: v-linear 12%; +$v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7); +$v-shadow-opacity: 20%; +$v-selection-overlay-padding-horizontal: 0; +$v-selection-overlay-padding-vertical: 6px; +$v-selection-item-border-radius: 0; + +@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo/_flat-dark.scss b/WebContent/VAADIN/themes/tests-valo/_flat-dark.scss new file mode 100644 index 0000000000..f68f9c266d --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo/_flat-dark.scss @@ -0,0 +1,20 @@ +$v-app-loading-text: "Dark & Flat Valo"; + +$v-background-color: #000; +$v-focus-color: orange; +$v-font-size: 15px; +$v-font-weight: 600; +$v-unit-size: 42px; +$v-bevel: false; +$v-shadow: false; +$v-gradient: false; +$v-textfield-bevel: false; +$v-textfield-shadow: false; +$v-border-radius: 0; +$v-border: 2px solid v-tone; +$v-overlay-shadow: 0 0 0 2px (v-tint 10); +$v-focus-style: $v-focus-color; +$v-font-family: "Lato", sans-serif; +$v-font-weight--header: 600; + +@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo/_flat.scss b/WebContent/VAADIN/themes/tests-valo/_flat.scss new file mode 100644 index 0000000000..5d2b8abbb7 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo/_flat.scss @@ -0,0 +1,43 @@ +$v-app-loading-text: "Flat Valo"; + +$v-font-family: "Roboto", sans-serif; +$v-font-weight: 400; +$v-font-weight--header: 400; +$v-background-color: #fff; +$v-focus-color: rgb(150,190,90); +$v-luminance-threshold: 180; +$v-border: 2px solid v-shade; +$v-border-radius: 6px; +$v-bevel: false; +$v-gradient: false; +$v-shadow: false; +$v-textfield-bevel: false; +$v-textfield-shadow: false; +$v-link-text-decoration: false; +$v-selection-overlay-padding-horizontal: 0; +$v-selection-overlay-padding-vertical: 6px; +$v-selection-item-height: 30px; +$v-selection-item-border-radius: 0; + + +@import "../valo/valo"; + + +.valo-test { + .v-button-primary.v-button-primary { + background: #fff; + border-color: $v-focus-color; + color: $v-focus-color; + } + + .v-button-danger.v-button-danger { + background: #fff; + border-color: $v-error-indicator-color; + color: $v-error-indicator-color; + } + + .v-slider-base:before, + .v-slider-base:after { + border: none !important; + } +} diff --git a/WebContent/VAADIN/themes/tests-valo/_metro.scss b/WebContent/VAADIN/themes/tests-valo/_metro.scss new file mode 100644 index 0000000000..f11cdb8b64 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo/_metro.scss @@ -0,0 +1,26 @@ +$v-app-loading-text: "Metro Valo"; + +$v-font-family: "Source Sans Pro", sans-serif; +$v-app-background-color: #fff; +$v-background-color: #eee; +$v-focus-color: #0072C6; +$v-focus-style: 0 0 0 1px $v-focus-color; +$valo-menu-background-color: darken($v-focus-color, 10%); +$v-border: 0 solid v-shade; +$v-border-radius: 0px; +$v-bevel: false; +$v-gradient: false; +$v-shadow: false; +$v-textfield-bevel: false; +$v-textfield-shadow: false; +$v-textfield-border: 1px solid v-shade; +$v-link-text-decoration: none; +$v-overlay-shadow: 0 0 0 2px #000; +$v-overlay-border-width: 2px; // For IE8 +$v-window-shadow: $v-overlay-shadow; +$v-selection-overlay-background-color: #fff; +$v-selection-overlay-padding-horizontal: 0; +$v-selection-overlay-padding-vertical: 6px; +$v-panel-border: 2px solid v-shade; + +@import "../valo/valo"; diff --git a/WebContent/VAADIN/themes/tests-valo/styles.scss b/WebContent/VAADIN/themes/tests-valo/styles.scss new file mode 100644 index 0000000000..89fc5755f4 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo/styles.scss @@ -0,0 +1,127 @@ +@import "default"; +// @import "flat"; +// @import "flat-dark"; +// @import "facebook"; +// @import "metro"; +// @import "dark"; +// @import "blueprint"; + + +.tests-valo { + @include valo; + + .valo-menu .v-checkbox { + margin: round($v-unit-size/2); + font-weight: 400; + } + + $color1: hsl(220, 5%, 38%); + $color2: #5d73c0; + $color3: #3dbc1a; + $color4: #d2f4f3; + $color5: #fe902a; + $colors: $color1, $color2, $color3, $color4, $color5; + + .v-textfield-color1 { + @include valo-textfield-style($background-color: $color1); + } + + .v-textfield-color2 { + @include valo-textfield-style($background-color: $color3); + } + + .v-textfield-color3 { + @include valo-textfield-style($background-color: $color4); + } + + + .v-textarea-color1 { + @include valo-textarea-style($background-color: $color1); + } + + .v-textarea-color2 { + @include valo-textarea-style($background-color: $color3); + } + + .v-textarea-color3 { + @include valo-textarea-style($background-color: $color4); + } + + + .v-datefield-color1 { + @include valo-datefield-style($background-color: $color1); + } + + .v-datefield-color2 { + @include valo-datefield-style($background-color: $color3); + } + + .v-datefield-color3 { + @include valo-datefield-style($background-color: $color4); + } + + + .v-filterselect-color1 { + @include valo-combobox-style($background-color: $color1); + } + + .v-filterselect-color2 { + @include valo-combobox-style($background-color: $color3); + } + + .v-filterselect-color3 { + @include valo-combobox-style($background-color: $color4); + } + + + $copy: $v-selection-color; + $v-selection-color: white; + .v-checkbox-color1 { + @include valo-checkbox-style($background-color: $color1); + } + + .v-checkbox-color2 { + @include valo-checkbox-style($background-color: $color2); + } + $v-selection-color: $copy; + + + .v-slider-color1 { + @include valo-slider-handle-style($background-color: $color1); + } + + .v-slider-color2 { + @include valo-slider-track-style($background-color: $color3); + } + + .v-slider-color3 { + @include valo-slider-indicator-style($background-color: #dcdc1e); + } + + + .v-panel-caption-color1 { + @include valo-panel-caption-style($background-color: $color1); + } + + .v-panel-caption-color2 { + @include valo-panel-caption-style($background-color: $color3); + } + + .v-panel-caption-color3 { + @include valo-panel-caption-style($background-color: $color5); + } + + // Show splitpanel borders + .v-splitpanel-vertical, + .v-splitpanel-horizontal { + outline: 1px dotted rgba(gray, .2); + } + + .v-slider-ticks { + @include valo-slider-ticks($tick-count: 5); + } + + .v-accordion-item-color1 .v-accordion-item-caption { + @include valo-accordion-item-caption-style($background-color: $color2); + } +} diff --git a/WebContent/VAADIN/themes/valo/_valo.scss b/WebContent/VAADIN/themes/valo/_valo.scss new file mode 100644 index 0000000000..b21cf733d1 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/_valo.scss @@ -0,0 +1,67 @@ +// Import global variables +@import "shared/variables"; + + +// Import all utility mixins and functions +@import "util/bourbon/bourbon"; +@import "util/lists"; +@import "util/css3"; +@import "util/color"; +@import "util/anim"; +@import "util/gradient"; +@import "util/bevel-and-shadow"; +@import "util/util"; + + +// Import custom font mixins +@import "fonts/fonts"; + + +// Include custom font faces if they are used by the theme +@if contains($v-font-family, "Open Sans") { + @include font-open-sans($light: true, $regular: true, $medium: true); +} +@if contains($v-font-family, "Source Sans Pro") { + @include font-source-sans-pro($light: true, $regular: true, $medium: true); +} +@if contains($v-font-family, "Roboto") { + @include font-roboto($light: true, $regular: true, $medium: true); +} +@if contains($v-font-family, "Lato") { + @include font-lato($light: true, $regular: true, $bold: true); +} +@if contains($v-font-family, "Lora") { + @include font-lora($regular: true, $bold: true); +} + + + +// Import global mixins +@import "shared/global"; + + +// Import component specific mixins +@import "components/all"; + + +// Import common additional style names for components (optional) +@import "optional/common-stylenames"; + + +// Include global styles directly, without a theme name prefix (this is done only once) +@include valo-global; + + +// The main theme mixin +@mixin valo { + @include valo-common; + @include valo-components; + + @if v-is-included(notification) { + @include valo-notification; + } + + @if $valo-include-common-stylenames { + @include valo-common-stylenames; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_absolutelayout.scss b/WebContent/VAADIN/themes/valo/components/_absolutelayout.scss new file mode 100755 index 0000000000..1750491196 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_absolutelayout.scss @@ -0,0 +1,22 @@ +@mixin valo-absolutelayout ($primary-stylename: v-absolutelayout) { + + .#{$primary-stylename}-wrapper { + position: absolute; + } + + .#{$primary-stylename}-margin, + .#{$primary-stylename}-canvas { + @include box-sizing(border-box); + } + + .#{$primary-stylename}.v-has-height > div, + .#{$primary-stylename}.v-has-height .#{$primary-stylename}-margin { + height: 100%; + } + + .#{$primary-stylename}.v-has-height > div, + .#{$primary-stylename}.v-has-width .#{$primary-stylename}-margin { + width: 100%; + } + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_accordion.scss b/WebContent/VAADIN/themes/valo/components/_accordion.scss new file mode 100644 index 0000000000..350c704eb4 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_accordion.scss @@ -0,0 +1,109 @@ +@mixin valo-accordion ($primary-stylename: v-accordion) { + .#{$primary-stylename} { + @include valo-accordion-style; + } + + .#{$primary-stylename}-item { + @include valo-accordion-item-style; + } + + .#{$primary-stylename}-item-caption { + @include valo-accordion-item-caption-style; + } + + .#{$primary-stylename}-item-content { + @include valo-accordion-item-content-style; + } +} + + + +@mixin valo-accordion-style { + @include valo-panel-style; + $grad-style: valo-gradient-style($v-gradient); + $grad-opacity: valo-gradient-opacity($v-gradient); + @include valo-gradient($color: $v-background-color, $gradient: ($grad-style $grad-opacity/2)); + overflow: hidden; +} + + +@mixin valo-accordion-item-style { + position: relative; + overflow: hidden; + + @if $v-border-radius > 0 { + $_br: $v-border-radius - first-number($v-border); + + &:first-child { + border-radius: $_br $_br 0 0; + + .v-caption { + border-radius: inherit; + } + } + + &:last-child { + border-radius: 0 0 $_br $_br; + + .v-caption { + border-radius: 0; + } + } + } + + &:last-child:not([class*="item-open"]) .v-caption { + border-bottom: none; + } + + &[class*="item-open"] + [class*="item"] { + border-top: valo-border($color: $v-panel-background-color, $strength: 0.7); + } +} + + + +@mixin valo-accordion-item-caption-style ($background-color: null) { + .v-caption { + @include valo-panel-caption-style($background-color: $background-color or $v-background-color); + display: block; + @if $background-color == null { + background: transparent; + } + border-bottom-color: first-color(valo-border($color: $v-panel-background-color)); + cursor: pointer; + @include user-select(none);; + + &:hover:before, + &:active:before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + @if $v-hover-styles-enabled { + &:hover:before { + @include valo-button-hover-style; + border: none; + } + } + + &:active:before { + @include valo-button-active-style; + } + } +} + + +@mixin valo-accordion-item-content-style { + position: absolute; + width: 100%; + bottom: 0; + right: 0; + @include box-shadow(valo-bevel-and-shadow($shadow: join(inset, $v-shadow), $shadow-opacity: $v-shadow-opacity/2)); + background-color: $v-panel-background-color; + @include box-sizing(border-box); + @include valo-panel-adjust-content-margins; +} diff --git a/WebContent/VAADIN/themes/valo/components/_all.scss b/WebContent/VAADIN/themes/valo/components/_all.scss new file mode 100644 index 0000000000..f20e8326bf --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_all.scss @@ -0,0 +1,210 @@ +@import "absolutelayout"; +@import "accordion"; +@import "button"; +@import "calendar"; +@import "checkbox"; +@import "colorpicker"; +@import "combobox"; +@import "csslayout"; +@import "customcomponent"; +@import "customlayout"; +@import "datefield"; +@import "dragwrapper"; +@import "form"; +@import "formlayout"; +@import "grid"; +@import "gridlayout"; +@import "label"; +@import "link"; +@import "loginform"; +@import "menubar"; +@import "nativebutton"; +@import "nativeselect"; +@import "optiongroup"; +@import "orderedlayout"; +@import "panel"; +@import "popupview"; +@import "progressbar"; +@import "richtextarea"; +@import "slider"; +@import "splitpanel"; +@import "table"; +@import "tabsheet"; +@import "textfield"; +@import "textarea"; +@import "tree"; +@import "treetable"; +@import "twincolselect"; +@import "upload"; +@import "widget"; +@import "window"; + + +@mixin valo-components { + + @if v-is-included(absolutelayout) { + @include valo-absolutelayout; + } + + @if v-is-included(orderedlayout) { + @include valo-orderedlayout; + } + + @if v-is-included(button) { + @include valo-button; + } + + @if v-is-included(checkbox) or v-is-included(optiongroup) { + @include valo-checkbox; + } + + @if v-is-included(combobox) { + @include valo-combobox; + } + + @if v-is-included(csslayout) { + @include valo-csslayout; + } + + @if v-is-included(customcomponent) { + @include valo-customcomponent; + } + + @if v-is-included(customlayout) { + @include valo-customlayout; + } + + @if v-is-included(form) { + @include valo-form; + } + + @if v-is-included(formlayout) { + @include valo-formlayout; + } + + @if v-is-included(grid) { + @include valo-grid(v-escalator); + } + + @if v-is-included(textfield) { + @include valo-textfield; + } + + @if v-is-included(textarea) { + @include valo-textarea; + } + + @if v-is-included(datefield) { + @include valo-datefield; + @include valo-inline-datefield; + } + + @if v-is-included(gridlayout) { + @include valo-gridlayout; + } + + @if v-is-included(menubar) { + @include valo-menubar; + } + + @if v-is-included(optiongroup) { + @include valo-optiongroup; + } + + @if v-is-included(link) { + @include valo-link; + } + + @if v-is-included(window) { + @include valo-window; + } + + @if v-is-included(tree) { + @include valo-tree; + } + + @if v-is-included(table) or v-is-included(treetable) { + @include valo-table; + } + + @if v-is-included(treetable) { + @include valo-treetable; + } + + @if v-is-included(splitpanel) { + @include valo-splitpanel; + } + + @if v-is-included(progressbar) { + @include valo-progressbar; + } + + @if v-is-included(progressindicator) { + @include valo-progressbar($primary-stylename: v-progressindicator); + } + + @if v-is-included(slider) { + @include valo-slider; + } + + @if v-is-included(tabsheet) { + @include valo-tabsheet; + } + + @if v-is-included(colorpicker) { + @include valo-colorpicker; + } + + @if v-is-included(panel) { + @include valo-panel; + } + + @if v-is-included(accordion) { + @include valo-accordion; + } + + @if v-is-included(twincolselect) { + @include valo-twincolselect; + } + + @if v-is-included(nativeselect) { + @include valo-nativeselect; + } + + @if v-is-included(calendar) { + @include valo-calendar; + } + + @if v-is-included(label) { + @include valo-label; + } + + @if v-is-included(dragwrapper) { + @include valo-dragwrapper; + } + + @if v-is-included(loginform) { + @include valo-loginform; + } + + @if v-is-included(nativebutton) { + @include valo-nativebutton; + } + + @if v-is-included(nativeselect) { + @include valo-nativeselect; + } + + @if v-is-included(popupview) { + @include valo-popupview; + } + + @if v-is-included(richtextarea) { + @include valo-richtextarea; + } + + @if v-is-included(upload) { + @include valo-upload; + } + +} diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss new file mode 100644 index 0000000000..cea1c9fbc8 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_button.scss @@ -0,0 +1,281 @@ +@mixin valo-button ($primary-stylename: v-button) { + .#{$primary-stylename} { + @include valo-button-static-style; + @include valo-button-style; + } +} + + + + + +@mixin valo-button-static-style ($states: (normal, hover, focus, active, disabled), $vertical-centering: true) { + @if contains($states, normal) { + position: relative; + text-align: center; + white-space: nowrap; + outline: none; + @include valo-tappable; + @if $vertical-centering { + @include valo-button-vertical-centering; + } + } + + @if contains($states, hover) or contains($states, focus) or contains($states, active) { + // Generated element for :hover, :focus and :active styles + &:after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: inherit; + @if $v-animations-enabled { + @include transition(box-shadow 180ms, border 180ms); + } + } + } + + @if contains($states, focus) { + &:focus:after { + @if $v-animations-enabled { + @include transition(none); + } + } + } + + @if contains($states, disabled) { + &.v-disabled { + @include opacity($v-disabled-opacity); + + &:after { + display: none; + } + } + } +} + + + + + +@mixin valo-button-style ( + $unit-size : $v-unit-size, + $padding : null, // Computed by default + + $font-color : null, // Computed by default + $font-weight : $v-font-weight + 100, + $font-size : null, // Inherited by default + $cursor : null, + + $background-color : $v-background-color, + $border : $v-border, + $border-radius : $v-border-radius, + + $gradient : $v-gradient, + $bevel : $v-bevel, + $shadow : $v-shadow, + + $states : (normal, hover, focus, active, disabled) +) { + + @if contains($states, focus) or contains($states, active) { + $border-width: first-number($border); + &:after { + border: inherit; + top: -$border-width; + right: -$border-width; + bottom: -$border-width; + left: -$border-width; + } + } + + @if contains($states, normal) { + @if $unit-size { + height: $unit-size; + @if type-of($padding) == number or type-of($padding) == list { + padding: $padding; + } @else { + padding: 0 round($unit-size/2.4) + round($border-radius/3); + } + } + + $_font-color: $font-color or valo-font-color($background-color, 0.9); + color: $_font-color; + font-weight: $font-weight; + font-size: $font-size; + cursor: $cursor; + + border-radius: $border-radius; + + @if type-of($background-color) == color { + @include valo-border-with-gradient($border: $border, $color: darkest-color($background-color, $v-background-color), $gradient: $gradient); + @include valo-gradient($background-color, $gradient); + @include box-shadow(valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient)); + } + + @if $bevel and type-of($_font-color) == color and type-of($background-color) == color { + text-shadow: valo-text-shadow($_font-color, $background-color, $bevel); + } + + @if $bevel == none and $shadow == none { + @include box-shadow(none); + } + } + + @if $background-color { + @if contains($states, hover) { + &:hover:after { + @include valo-button-hover-style($background-color); + } + } + + @if contains($states, focus) { + &:focus:after { + @include valo-button-focus-style($background-color); + } + } + + @if contains($states, active) { + &:active:after { + @include valo-button-active-style($background-color); + } + } + } +} + + + + +@mixin valo-button-hover-style ($background-color: $v-background-color) { + $bg: darken($background-color, 25%); + @if is-dark-color($background-color) { + $bg: lighten($background-color, 15%); + } + background-color: rgba($bg, .1); +} + + + +@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit, $include-box-shadow: true) { + $focus-color: $v-focus-color; + + @if color-luminance($focus-color) + 50 < color-luminance($background-color) { + border-color: $focus-color; + } @else if $border-fallback != none { + border: $border-fallback or valo-border($color: $background-color); + } + + @include valo-focus-style($include-box-shadow: $include-box-shadow); +} + + + +@mixin valo-button-active-style ($background-color: $v-background-color) { + $bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($background-color)); + background-color: rgba($bg, .2); +} + + + + + +@mixin valo-button-vertical-centering { + // Vertical centering of icon and caption, independent of the height of the button + @include valo-vertical-align-guide($to-align: div, $pseudo-element: before); + + // WebKit handles line-heights and vertical-alignments somewhat differently, so we need to adjust + .v-sa &:before { + height: 110%; + } + + // Firefox needs a bit of adjusting as well + .v-ff &:before { + height: 107%; + } + + // ...and so does IE. Who knew? + .v-ie &:before { + margin-top: 4px; + } +} + + + + +@mixin valo-button-borderless-style ($font-color: inherit) { + border: none; + @include box-shadow(none); + background: transparent; + color: $font-color; + + &:hover { + &:after { + background: transparent; + } + + @if type-of($font-color) == color { + color: lighten($font-color, 10%); + } + } + + &:active { + @include opacity(.7); + + &:after { + background: transparent; + } + } +} + + +@mixin valo-button-quiet-style ($primary-stylename: v-button) { + visibility: hidden; + + &:focus, + &:hover { + visibility: visible; + } + + .#{$primary-stylename}-wrap { + visibility: visible; + } +} + + +@mixin valo-button-icon-align-right-style ($primary-stylename: v-button) { + .#{$primary-stylename}-wrap { + display: inline-block; + } + + .v-icon { + float: right; + $padding-width: ceil($v-unit-size/2.4); + margin-left: $padding-width + ceil($padding-width/-5); + + + span:not(:empty) { + margin-left: 0; + } + } +} + + +@mixin valo-button-icon-align-top-style ($primary-stylename: v-button) { + height: auto; + padding-top: ceil($v-unit-size/9); + padding-bottom: ceil($v-unit-size/9); + + .#{$primary-stylename}-wrap { + display: inline-block; + } + + .v-icon { + display: block; + + + span:not(:empty) { + margin-top: ceil($v-unit-size/6); + margin-left: 0; + } + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_calendar.scss b/WebContent/VAADIN/themes/valo/components/_calendar.scss new file mode 100644 index 0000000000..753291eea9 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_calendar.scss @@ -0,0 +1,538 @@ +$v-calendar-event-colors: #00ace0, #2d9f19, #d18100, #ce3812, #2d55cd !default; + + +@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; + } +} + + + + + + + + +@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; + } + +} + + +@mixin valo-calendar-prev-style { + &:before { + @include valo-tabsheet-scroller-prev-icon-style; + } +} + +@mixin valo-calendar-next-style { + &:before { + @include valo-tabsheet-scroller-next-icon-style; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss new file mode 100644 index 0000000000..0ee703c372 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss @@ -0,0 +1,113 @@ +@mixin valo-checkbox ($primary-stylename: v-checkbox) { + + .#{$primary-stylename} { + @include valo-checkbox-style; + } + +} + + +@mixin valo-checkbox-icon-style { + content: "\f00c"; + font-family: FontAwesome; +} + + +@mixin valo-checkbox-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) { + + // So that we can use the same 'unit-size' for all component sizes + $size: $unit-size/2; + + position: relative; + line-height: round($size); + white-space: nowrap; + + &.v-has-width label { + white-space: normal; + } + + :root & { + padding-left: round($size*1.33); + + label { + @include valo-tappable; + } + } + + :root & > input { + position: absolute; + clip: rect(0,0,0,0); + left: .2em; + top: .2em; + z-index: 0; + margin: 0; + + &:focus ~ label:before { + @include valo-button-focus-style($background-color: $background-color, $border-fallback: null, $include-box-shadow: false); + @include box-shadow(valo-bevel-and-shadow($background-color: $background-color, $bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $include-focus: true)); + } + + & ~ label:before, + & ~ label:after { + content: ""; + display: inline-block; + @include box-sizing(border-box); + width: round($size); + height: round($size); + position: absolute; + top: 0; + left: 0; + border-radius: min(round($size/3), $v-border-radius); + font-size: round($v-font-size * 0.8 * ($size*2/$v-unit-size)); + text-align: center; + } + + & ~ label:before { + @include valo-button-style($background-color: $background-color, $unit-size: $size, $border-radius: min(round($size/3), $v-border-radius)); + padding: 0; + height: round($size); + } + + & ~ label:after { + @include valo-checkbox-icon-style; + color: transparent; + @if $v-animations-enabled { + @include transition(color 100ms); + } + } + + &:active ~ label:after { + @include valo-button-active-style($background-color: $background-color); + } + + &:checked ~ label:after { + color: $selection-color; + } + + &[disabled] { + ~ label, + ~ label .v-icon, + ~ .v-icon { + cursor: default; + } + + ~ label:before, + ~ label:after { + @include opacity($v-disabled-opacity); + } + + &:active ~ label:after { + background: transparent; + } + } + + } + + & > .v-icon, + & > label .v-icon { + margin: 0 round($size/3) 0 round($size/6); + min-width: 1em; + cursor: pointer; + } + +} diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss new file mode 100644 index 0000000000..4509c23f15 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss @@ -0,0 +1,208 @@ +@mixin valo-colorpicker-global ($primary-stylename: v-colorpicker) { + $valo-colorpicker-pathPrefix: null; + @if $v-relative-paths == false { + $valo-colorpicker-pathPrefix: "../valo/components/"; + } + + .#{$primary-stylename}-popup.v-window { + min-width: 220px !important; + } + + .#{$primary-stylename}-gradient-container { + overflow: visible !important; + } + + .#{$primary-stylename}-gradient-clicklayer { + @include opacity(0); + } + + .rgb-gradient .#{$primary-stylename}-gradient-background { + background: url(#{$valo-colorpicker-pathPrefix}img/colorpicker/gradient2.png); + } + + .hsv-gradient .#{$primary-stylename}-gradient-foreground { + background: url(#{$valo-colorpicker-pathPrefix}img/colorpicker/gradient.png); + } + + .#{$primary-stylename}-gradient-higherbox { + &:before { + content: ""; + width: 11px; + height: 11px; + border-radius: 7px; + border: 1px solid #fff; + @include box-shadow(0 0 0 1px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.3)); + position: absolute; + bottom: -6px; + left: -6px; + } + } + + .#{$primary-stylename}-popup .v-slider.v-slider-red:before { + background-color: red; + } + + .#{$primary-stylename}-popup .v-slider.v-slider-green:before { + background-color: green; + } + + .#{$primary-stylename}-popup .v-slider.v-slider-blue:before { + background-color: blue; + } + + .#{$primary-stylename}-popup .v-slider.hue-slider:before { + background: url(#{$valo-colorpicker-pathPrefix}img/colorpicker/slider_hue_bg.png); + } + + .#{$primary-stylename}-popup input.v-textfield-dark { + color: #fff; + } + + .#{$primary-stylename}-popup input.v-textfield-light { + color: #000; + } + + // TODO magic numbers + .#{$primary-stylename}-grid { + height: 319px; + } + + .#{$primary-stylename}-popup .colorselect td { + line-height: 15px; + } +} + + + + + + +@mixin valo-colorpicker ($primary-stylename: v-colorpicker) { + + .#{$primary-stylename}-popup.v-window { + min-width: 220px !important; + } + + .#{$primary-stylename}-popup { + .v-tabsheet-tabs { + padding: 0 round($v-unit-size/4); + } + + [class$="sliders"] { + padding: round($v-unit-size/3); + + .v-widget { + width: 100% !important; + vertical-align: middle; + } + + .v-has-caption { + white-space: nowrap; + padding-left: $v-font-size * 3; + } + + .v-caption { + display: inline-block; + margin-left: $v-font-size * -3; + width: $v-font-size * 3; + } + + // Saturation caption needs more space + .v-slot-hue-slider + .v-slot { + .v-has-caption { + padding-left: $v-font-size * 5; + } + + .v-caption { + margin-left: $v-font-size * -5; + width: $v-font-size * 5; + } + } + } + + .v-slider-red .v-slider-base:after { + background: red; + border: none; + @include box-shadow(none); + } + + .v-slider-green .v-slider-base:after { + background: green; + border: none; + @include box-shadow(none); + } + + .v-slider-blue .v-slider-base:after { + background: blue; + border: none; + @include box-shadow(none); + } + + .v-margin-bottom { + padding-bottom: 0; + } + + .resize-button { + width: 100% !important; + height: auto !important; + text-align: center; + outline: none; + + &:before { + font-family: FontAwesome; + content: "\F141"; + } + } + + .resize-button-caption { + display: none; + } + + .v-horizontallayout { + height: auto !important; + padding: round($v-unit-size/4) 0; + background-color: $v-background-color; + border-top: first-number($v-border) solid scale-color($v-background-color, $lightness: -5%); + + .v-expand { + overflow: visible; + } + + .v-button { + width: 80% !important; + } + } + } + + .#{$primary-stylename}-preview { + width: 100% !important; + height: auto !important; + padding: round($v-unit-size/4); + } + + .#{$primary-stylename}-preview-textfield { + height: auto !important; + text-align: center; + border: none; + } + + .#{$primary-stylename} { + width: auto !important; + } + + .#{$primary-stylename}-button-color { + position: absolute; + top: round($v-unit-size/6); + right: round($v-unit-size/6); + bottom: round($v-unit-size/6); + left: round($v-unit-size/6); + border-radius: $v-border-radius - 1px; + border: 1px solid hsla(0, 0%, 0%, .5); + max-width: $v-unit-size - round($v-unit-size/3) - 2px; + + + .v-button-caption:not(:empty) { + margin-left: round($v-unit-size/2); + } + } + +} diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss new file mode 100644 index 0000000000..51ec65e55f --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -0,0 +1,383 @@ +@mixin valo-combobox ($primary-stylename: v-filterselect) { + + .#{$primary-stylename} { + position: relative; + width: $v-default-field-width; + @include valo-combobox-style($primary-stylename: $primary-stylename); + white-space: nowrap; + + .v-icon { + position: absolute; + pointer-events: none; + } + } + + .#{$primary-stylename}-error { + .#{$primary-stylename}-input { + @include valo-textfield-error-style; + } + + .#{$primary-stylename}-button { + color: $v-error-indicator-color; + border-color: $v-error-indicator-color; + } + } + + .#{$primary-stylename}-suggestpopup { + @include valo-combobox-popup-style($primary-stylename: $primary-stylename); + } + + .#{$primary-stylename}-no-input { + cursor: pointer; + text-shadow: valo-text-shadow(); + + @if $v-border-radius != $v-textfield-border-radius { + border-radius: $v-border-radius; + } + + .#{$primary-stylename}-input { + @include user-select(none); + @include valo-gradient; + cursor: inherit; + @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient)); + @include valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient); + text-shadow: inherit; + text-overflow: ellipsis; + border-radius: inherit; + + &:focus { + @include valo-textfield-focus-style($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $background-color: $v-background-color); + } + } + + .#{$primary-stylename}-button { + border-left: none !important; + } + + &:hover .#{$primary-stylename}-button:before { + color: inherit; + } + } + +} + + + + + + +@mixin valo-combobox-style ( + $unit-size: $v-unit-size, + + $font-color: null, // Computed by default + $font-weight: max(400, $v-font-weight), + $font-size: null, // Inherited by default + + $background-color: $v-textfield-background-color, + $border: $v-textfield-border, + $border-radius: $v-textfield-border-radius, + + $gradient: none, + $bevel: $v-textfield-bevel, + $shadow: $v-textfield-shadow, + + $primary-stylename: v-filterselect + ) { + + height: $unit-size; + border-radius: $border-radius; + + .#{$primary-stylename}-input { + @include valo-combobox-input-style( + $unit-size: $unit-size, + $gradient: $gradient, + $bevel: $bevel, + $shadow: $shadow, + $border: $border, + $border-radius: $border-radius, + $background-color: $background-color, + $font-color: $font-color, + $font-size: $font-size, + $font-weight: $font-weight); + } + + .v-icon + .#{$primary-stylename}-input { + padding-left: $unit-size; + } + + img.v-icon { + $padding-width: ceil($unit-size/6); + max-height: $unit-size; + @if $border-radius { + $padding-width: $padding-width + ceil($border-radius/3); + } + margin-left: $padding-width; + } + + span.v-icon { + color: valo-font-color($background-color); + width: $unit-size; + line-height: 1; + padding-top: .12em; + } + + &.#{$primary-stylename}-prompt > .#{$primary-stylename}-input { + @include valo-textfield-prompt-style($background-color); + } + + .#{$primary-stylename}-button { + @include valo-combobox-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color); + } + + &.v-disabled { + @include opacity($v-textfield-disabled-opacity); + & .#{$primary-stylename}-button { + cursor: default; + pointer-events: none; + &:active:after { + display: none; + } + } + } + + &.v-readonly { + .#{$primary-stylename}-input { + @include valo-textfield-readonly-style; + } + + .#{$primary-stylename}-button { + cursor: default; + pointer-events: none; + &:active:after { + display: none; + } + } + } +} + + + + +@mixin valo-combobox-input-style ( + $unit-size: $v-unit-size, + $padding: null, // Computed by default + + $font-color: null, // Computed by default + $font-weight: null, // Inherited by default + $font-size: null, // Inherited by default + + $background-color: $v-textfield-background-color, + $border: $v-border, + $border-radius: $v-textfield-border-radius, + + $gradient: none, + $bevel: $v-bevel, + $shadow: $v-shadow +) { + @include box-sizing(border-box); + @include valo-textfield-style($unit-size: $unit-size, + $padding: $padding, + $font-color: $font-color, + $font-weight: $font-weight, + $font-size: $font-size, + $background-color: $background-color, + $border: $border, + $border-radius: $border-radius, + $gradient: $gradient, + $bevel: $bevel, + $shadow: $shadow); + width: 100% !important; // Need to override calculated inline style which is sometimes added + height: 100%; + padding-right: round($unit-size * 1.2); + border-radius: inherit; +} + + + + + + + +@mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color) { + $border-width: first-number($v-textfield-border); + @include valo-tappable; + position: absolute; + top: $border-width; + right: $border-width; + bottom: $border-width; + width: $unit-size; + cursor: pointer; + + @if type-of($background-color) == color { + border-left: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5); + color: mix($background-color, valo-font-color($background-color)); + + .v-ie8 & { + background-color: $background-color; + } + } + + @if $v-border-radius > 0 { + $br: $v-border-radius - $border-width; + border-radius: 0 $br $br 0; + } + + &:before { + @include valo-combobox-button-icon-style; + + @if $v-animations-enabled { + @include transition(color 140ms); + } + position: absolute; + width: $unit-size; + text-align: center; + top: 50%; + line-height: 1; + margin-top: -.47em; + } + + @if $v-hover-styles-enabled and type-of($background-color) == color { + &:hover:before { + color: valo-font-color($background-color); + } + } + + &:active:after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: inherit; + @if type-of($background-color) == color { + @include valo-button-active-style($background-color); + } + } +} + + + +@mixin valo-combobox-button-icon-style { + font-family: FontAwesome; + content: "\f078"; +} + + + + +@mixin valo-combobox-popup-style ($primary-stylename: v-filterselect) { + + @if $v-animations-enabled { + @if $v-overlay-animate-in { + &[class*="animate-in"] { + @include animation($v-overlay-animate-in); + } + } + // No animate-out since that will currently prevent the dropdown from + // closing when the user selects an item + } + + .#{$primary-stylename}-suggestmenu { + @include valo-selection-overlay-style($animate-in: false, $animate-out: false); + box-sizing: border-box; + position: relative; + z-index: 1; + } + + margin-top: ceil($v-unit-size/8) !important; + + table, + tbody, + tr, + td { + display: block; + } + + .gwt-MenuItem { + @include valo-selection-item-style; + } + + .gwt-MenuItem-selected { + @include valo-selection-item-selected-style; + } + + .#{$primary-stylename}-status { + position: absolute; + right: $v-border-radius; + $bg: scale-color($v-background-color, $lightness: -15%); + background: transparentize($bg, .1); + color: valo-font-color($bg); + border-radius: 0 0 $v-border-radius $v-border-radius; + height: ceil($v-unit-size*0.6); + bottom: -(ceil($v-unit-size*0.6)); + font-size: ceil($v-font-size*0.73); + line-height: ceil($v-unit-size*0.6); + padding: 0 ceil($v-unit-size/7); + cursor: default; + pointer-events: none; + + @if $v-animations-enabled { + @include animation(valo-anim-slide-in-down 200ms 80ms backwards); + } + + > * { + color: valo-font-color($bg); + text-decoration: none; + } + } + + div[class*="page"] { + position: absolute; + z-index: 3; + right: 0; + @include opacity(.2); + cursor: pointer; + @include transition( all 200ms ); + width: ceil($v-unit-size/1.5); + height: ceil($v-unit-size/1.5); + line-height: ceil($v-unit-size/1.5); + text-align: center; + font-family: FontAwesome; + @include transform( scale(.8) ); + + color: valo-font-color($v-background-color); + + &:hover { + @include opacity(1); + background: rgba($v-background-color, .5); + } + + span { + // Hide text + display: none; + } + } + + &:hover div[class*="page"] { + @include transform( scale(1) ); + } + + div[class*="prev"] { + top: 0; + @include transform-origin( 100% 0% ); + border-radius: 0 $v-border-radius 0 $v-border-radius; + &:before { + content: "\f0d8"; + } + + } + + div[class*="next"] { + bottom: 0; + @include transform-origin( 100% 100% ); + border-radius: $v-border-radius 0 $v-border-radius 0; + &:before { + content: "\f0d7"; + } + } + + div[class*="-off"] { + display: none; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_csslayout.scss b/WebContent/VAADIN/themes/valo/components/_csslayout.scss new file mode 100644 index 0000000000..3cefbb0a4b --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_csslayout.scss @@ -0,0 +1,63 @@ +@mixin valo-csslayout ($primary-stylename: v-csslayout){ + +} + + +@mixin valo-component-group ($primary-stylename: v-csslayout) { + .#{$primary-stylename}-v-component-group { + white-space: nowrap; + position: relative; + + @if $v-border-radius > 0 { + .v-widget ~ .v-widget:not(:last-child) { + border-radius: 0; + } + + .v-widget:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .v-widget:first-child, + .v-caption:first-child + .v-widget { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .v-widget ~ .v-widget.first.first { + border-radius: $v-border-radius 0 0 $v-border-radius; + } + + .v-widget ~ .v-widget.last.last { + border-radius: 0 $v-border-radius $v-border-radius 0; + } + } + + // Assume most components have borders. + // This is just a best-guess, will need fine-tuning if border-widths vary from widget-to-widget + .v-widget { + vertical-align: middle; + + $v-border-width: first-number($v-border); + + @if $v-border-width > 0 { + margin-left: -$v-border-width; + } @else { + margin-left: 1px; + } + + &:first-child { + margin-left: 0; + } + + // Focused component should be on top + &:focus, + &[class*="focus"], + [class*="focus"] { + position: relative; + z-index: 5; + } + } + + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_customcomponent.scss b/WebContent/VAADIN/themes/valo/components/_customcomponent.scss new file mode 100644 index 0000000000..34aef09c13 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_customcomponent.scss @@ -0,0 +1,3 @@ +@mixin valo-customcomponent ($primary-stylename: v-customcomponent) { + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_customlayout.scss b/WebContent/VAADIN/themes/valo/components/_customlayout.scss new file mode 100644 index 0000000000..75eac938f1 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_customlayout.scss @@ -0,0 +1,3 @@ +@mixin valo-customlayout ($primary-stylename: v-customlayout) { + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss new file mode 100644 index 0000000000..b1f3a78af6 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss @@ -0,0 +1,440 @@ +@mixin valo-datefield ($primary-stylename: v-datefield) { + + .#{$primary-stylename} { + position: relative; + width: $v-default-field-width; + @include valo-datefield-style($primary-stylename: $primary-stylename); + } + + .#{$primary-stylename}-error { + .#{$primary-stylename}-textfield { + @include valo-textfield-error-style; + } + + .#{$primary-stylename}-button { + color: $v-error-indicator-color; + border-color: $v-error-indicator-color; + } + } + + // Different widths for different resolutions + .#{$primary-stylename}-full { + width: round($v-font-size * 15); + } + + .#{$primary-stylename}-day { + width: $v-default-field-width; + } + + .#{$primary-stylename}-month { + width: round($v-font-size * 7.5); + } + + .#{$primary-stylename}-year { + width: round($v-font-size * 6.5); + } + + .v-datefield-popup { + @include valo-datefield-popup-style; + } + + @include valo-datefield-calendarpanel-style; + +} + + +@mixin valo-inline-datefield ($primary-stylename: v-inline-datefield) { + @include valo-datefield-calendarpanel-style(#{$primary-stylename}-calendarpanel); + + .#{$primary-stylename}-calendarpanel { + position: relative; + background: $v-overlay-background-color; + padding: round($v-unit-size/6); + } +} + + + + + +@mixin valo-datefield-style ( + $bevel : $v-textfield-bevel, + $shadow : $v-textfield-shadow, + $unit-size : $v-unit-size, + $border : $v-textfield-border, + $border-radius : $v-textfield-border-radius, + $background-color : $v-textfield-background-color, + $primary-stylename : v-datefield + ) { + + height: $unit-size; + border-radius: $border-radius; + + .#{$primary-stylename}-textfield { + @include box-sizing(border-box); + @include valo-textfield-style($bevel: $bevel, $shadow: $shadow, $unit-size: $unit-size, $border: $border, $border-radius: $border-radius, $background-color: $background-color) ; + padding-left: $unit-size * 1.2; + width: 100%; + height: 100%; + border-radius: inherit; + } + + &.#{$primary-stylename}-prompt > .#{$primary-stylename}-textfield { + @include valo-textfield-prompt-style($background-color); + } + + .#{$primary-stylename}-button { + @include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius, $border: $border); + } + + &.v-disabled { + @include opacity($v-disabled-opacity); + + .#{$primary-stylename}-button { + cursor: default; + pointer-events: none; + &:active:after { + display: none; + } + } + } + + &.v-readonly { + .#{$primary-stylename}-textfield { + @include valo-textfield-readonly-style; + } + + .#{$primary-stylename}-button { + cursor: default; + pointer-events: none; + &:active:after { + display: none; + } + } + } +} + + + + +@mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius, $border: $v-textfield-border) { + $border-width: first-number($border) or first-number($v-textfield-border); + @include valo-tappable; + -webkit-appearance: none; + background: transparent; + @if $border { + // Only override border if we are actually setting some border + border: none; + } + padding: 0; + position: absolute; + z-index: 10; + top: $border-width; + bottom: $border-width; + left: $border-width; + width: $unit-size; + line-height: $unit-size - ($border-width*2); + text-align: center; + cursor: pointer; + font: inherit; + outline: none; + margin: 0; + + @if type-of($background-color) == color { + border-right: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5); + color: mix($background-color, valo-font-color($background-color)); + + &:hover { + color: valo-font-color($background-color); + } + } + + @if $border-radius > 0 { + $br: max(0, $border-radius - $border-width); + border-radius: $br 0 0 $br; + } + + &:before { + @include valo-datefield-button-icon-style; + @if $v-animations-enabled { + @include transition(color 140ms); + } + } + + &:active:after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + @if type-of($background-color) == color { + @include valo-button-active-style($background-color); + } + border-radius: inherit; + } +} + + + + +@mixin valo-datefield-button-icon-style { + font-family: FontAwesome; + content: "\f073"; +} + + + + +@mixin valo-datefield-popup-style { + @include valo-overlay-style; + + @include user-select(none); + + margin-top: ceil($v-unit-size/8) !important; + cursor: default; + width: auto; + + table { + border-collapse: collapse; + border-spacing: 0; + } + + td { + padding: round($v-unit-size/20); + } + + @include valo-datefield-calendarpanel-style; +} + + +@mixin valo-datefield-calendarpanel-style ($primary-stylename: v-datefield-calendarpanel) { + .#{$primary-stylename} { + font-size: $v-font-size; + text-align: center; + + &:focus { + outline: none; + } + } + + .#{$primary-stylename}-day { + @include valo-datefield-calendarpanel-day-style; + display: inline-block; + @include box-sizing(border-box); + cursor: pointer; + &:hover { + @include valo-datefield-calendarpanel-day-hover-style; + } + } + + .#{$primary-stylename}-day-offmonth { + @include valo-datefield-calendarpanel-day-offmonth-style; + } + + .#{$primary-stylename}-day-today { + @include valo-datefield-calendarpanel-day-today-style; + } + + .#{$primary-stylename}-day.#{$primary-stylename}-day-selected, + .#{$primary-stylename}-day.#{$primary-stylename}-day-selected:hover { + @include valo-datefield-calendarpanel-day-selected-style + } + + .#{$primary-stylename}-day.#{$primary-stylename}-day-focused { + @include valo-datefield-calendarpanel-day-focused-style; + } + + + + .#{$primary-stylename}-weekdays { + height: round($v-unit-size * 0.7); + color: mix(valo-font-color($v-background-color), rgba($v-background-color, .7)); + + strong { + font: inherit; + font-size: ceil($v-font-size * 0.86); + } + } + + + .#{$primary-stylename}-header { + white-space: nowrap; + } + + td[class$="year"], + td[class$="month"] { + button { + @include appearance(none); + border: none; + background: transparent; + padding: 0; + margin: 0; + cursor: pointer; + color: transparent; + font-size: 0; // For IE8, where transparent text is not possible + width: round($v-unit-size * 0.5); + height: round($v-unit-size * 0.67); + outline: none; + position: relative; + vertical-align: middle; + + &:before { + color: mix($v-background-color, valo-font-color($v-background-color)); + font-size: round($v-font-size * 1.3); + line-height: round($v-font-size * 1.5); + + @if $v-animations-enabled { + @include transition(color 200ms); + } + } + + &:hover { + @include opacity(1); + &:before { + color: $v-focus-color; + } + } + } + } + + .v-button-prevyear:before { + @include valo-datefield-calendarpanel-prevyear-icon-style; + } + + .v-button-prevmonth:before { + @include valo-datefield-calendarpanel-prevmonth-icon-style; + } + + .v-button-nextyear:before { + @include valo-datefield-calendarpanel-nextyear-icon-style; + } + + .v-button-nextmonth:before { + @include valo-datefield-calendarpanel-nextmonth-icon-style; + } + + td.#{$primary-stylename}-month { + width: round($v-unit-size * 3.5); + @include valo-datefield-calendarpanel-month-style; + } + + .v-datefield-year td.v-datefield-calendarpanel-month { + width: round($v-unit-size * 2); + } + + .#{$primary-stylename}-weeknumber, + .#{$primary-stylename}-weekdays.#{$primary-stylename}-weeknumbers td:first-child { + width: round($v-unit-size * 0.8); + color: mix(valo-font-color($v-background-color), rgba($v-background-color, .7)); + font-size: ceil($v-font-size * 0.86); + display: inline-block; + text-align: left; + } + + .#{$primary-stylename}-weeknumber { + position: relative; + } + + .#{$primary-stylename}-weeknumbers .v-first:before { + content: ""; + position: absolute; + top: round($v-unit-size * 0.7) + round($v-unit-size/10)*2 + $v-overlay-padding-vertical; + bottom: 0; + left: 0; + width: round($v-unit-size * 0.7) + $v-overlay-padding-horizontal*2; + border-top: valo-border($color: $v-app-background-color, $strength: 0.3); + border-right: valo-border($color: $v-app-background-color, $strength: 0.3); + border-top-right-radius: $v-border-radius; + border-bottom-left-radius: $v-border-radius; + background: $v-app-background-color; + } + + td.v-datefield-calendarpanel-time { + width: 100%; + font-size: ceil($v-font-size * 0.86); + + .v-label { + display: inline-block; + margin: 0 0.1em; + font-weight: 400; + } + } + +} + + + + +@mixin valo-datefield-calendarpanel-day-style { + @include box-sizing(border-box); + width: round($v-unit-size * 0.8); + height: round($v-unit-size * 0.7); + border: first-number(valo-border()) solid transparent; + line-height: round($v-unit-size * 0.7); + text-align: center; + font-size: ceil($v-font-size * 0.86); + background: $v-background-color; + + @if $v-border-radius > 0 { + border-radius: ceil($v-border-radius/2); + } + @if $v-animations-enabled { + @include transition(color 200ms); + } +} + +@mixin valo-datefield-calendarpanel-day-hover-style { + color: $v-selection-color; +} + +@mixin valo-datefield-calendarpanel-day-offmonth-style { + color: mix(valo-font-color($v-background-color), $v-background-color); + background: transparent; +} + +@mixin valo-datefield-calendarpanel-day-today-style { + color: valo-font-color($v-background-color, 0.9); + font-weight: max(600, $v-font-weight + 100); + border-color: valo-font-color($v-background-color, 0.3); +} + +@mixin valo-datefield-calendarpanel-day-selected-style { + color: valo-font-color($v-selection-color); + @include valo-gradient($v-selection-color); + border: none; +} + +@mixin valo-datefield-calendarpanel-day-focused-style { + @include valo-focus-style($include-box-shadow: true); + position: relative; // Show above other cells + + .v-ie8 & { + border-color: $v-focus-color; + } +} + + +@mixin valo-datefield-calendarpanel-nextmonth-icon-style { + font-family: FontAwesome; + content: "\f105"; +} + +@mixin valo-datefield-calendarpanel-prevmonth-icon-style { + font-family: FontAwesome; + content: "\f104"; +} + +@mixin valo-datefield-calendarpanel-nextyear-icon-style { + font-family: FontAwesome; + content: "\f101"; +} + +@mixin valo-datefield-calendarpanel-prevyear-icon-style { + font-family: FontAwesome; + content: "\f100"; +} + +@mixin valo-datefield-calendarpanel-month-style { + color: $v-selection-color; +} diff --git a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss new file mode 100644 index 0000000000..7f1be69553 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss @@ -0,0 +1,119 @@ +@mixin valo-dragwrapper ($primary-stylename: v-ddwrapper) { + + [draggable=true] { + -khtml-user-drag: element; + -webkit-user-drag: element; + @include user-select(none); + } + + .#{$primary-stylename}.v-active-drag-source { + visibility: hidden; + } + + .#{$primary-stylename} { + position: relative; + } + + .#{$primary-stylename}-over:before, + .#{$primary-stylename}-over:after { + content: ""; + position: absolute; + z-index: 10; + top: -1px; + right: -1px; + bottom: -1px; + left: -1px; + border: 0 solid $v-focus-color; + } + + .#{$primary-stylename}-over-top:before { + border-top-width: 2px; + } + + .#{$primary-stylename}-over-right:before { + border-right-width: 2px; + } + + .#{$primary-stylename}-over-bottom:before { + border-bottom-width: 2px; + } + + .#{$primary-stylename}-over-left:before { + border-left-width: 2px; + } + + .no-vertical-drag-hints { + .#{$primary-stylename}-over-top, + &.#{$primary-stylename}-over-top { + &:before { + border-top-width: 0; + } + &:after { + @include valo-ddwrapper-box-hint-style; + } + } + + .#{$primary-stylename}-over-bottom, + &.#{$primary-stylename}-over-bottom { + &:before { + border-bottom-width: 0; + } + &:after { + @include valo-ddwrapper-box-hint-style; + } + } + } + + .no-horizontal-drag-hints { + &.#{$primary-stylename}-over-left, + .#{$primary-stylename}-over-left { + &:before { + border-left-width: 0; + } + &:after { + @include valo-ddwrapper-box-hint-style; + } + } + + &.#{$primary-stylename}-over-right, + .#{$primary-stylename}-over-right { + &:before { + border-right-width: 0; + } + &:after { + @include valo-ddwrapper-box-hint-style; + } + } + } + + .#{$primary-stylename}-over-middle:after, + .#{$primary-stylename}-over-center:after { + @include valo-ddwrapper-box-hint-style; + } + + .no-box-drag-hints { + &.#{$primary-stylename}:after, + .#{$primary-stylename}:after { + display: none !important; + content: none; + } + } + + +} + + + + +@mixin valo-ddwrapper-box-hint-style { + border-width: 2px; + border-radius: $v-border-radius; + @include opacity(.3); + + $focus-color: $v-focus-color; + @if is-dark-color($focus-color) { + background: scale-color($focus-color, $lightness: 50%); + } @else { + background: scale-color($focus-color, $lightness: -50%); + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_escalator.scss b/WebContent/VAADIN/themes/valo/components/_escalator.scss new file mode 100644 index 0000000000..237b53946b --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_escalator.scss @@ -0,0 +1,109 @@ +@mixin valo-escalator($primaryStyleName : v-escalator) { + +$background-color: white; +$border-color: #aaa; + +.#{$primaryStyleName} { + position: relative; + background-color: $background-color; +} + +.#{$primaryStyleName}-scroller { + position: absolute; + overflow: auto; + z-index: 20; +} + +.#{$primaryStyleName}-scroller-horizontal { + left: 0; /* Left position adjusted to align with frozen columns */ + right: 0; + bottom: 0; + overflow-y: hidden; + -ms-overflow-y: hidden; +} + +.#{$primaryStyleName}-scroller-vertical { + right: 0; + top: 0; /* this will be overridden by code, but it's a good default behavior */ + bottom: 0; /* this will be overridden by code, but it's a good default behavior */ + overflow-x: hidden; + -ms-overflow-x: hidden; +} + +.#{$primaryStyleName}-tablewrapper { + position: absolute; + overflow: hidden; +} + +.#{$primaryStyleName}-tablewrapper > table { + border-spacing: 0; + table-layout: fixed; + width: inherit; /* a decent default fallback */ +} + +.#{$primaryStyleName}-header, +.#{$primaryStyleName}-body, +.#{$primaryStyleName}-footer { + position: absolute; + left: 0; + width: inherit; + z-index: 10; +} + +.#{$primaryStyleName}-header { top: 0; } +.#{$primaryStyleName}-footer { bottom: 0; } + +.#{$primaryStyleName}-body { + z-index: 0; + top: 0; + + .#{$primaryStyleName}-row { + position: absolute; + top: 0; + left: 0; + } +} + +.#{$primaryStyleName}-row { + display: block; + + .v-ie8 & { + /* IE8 doesn't let table rows be longer than body only with display block. Moar hax. */ + float: left; + clear: left; + + /* + * The inline style of margin-top from the <tbody> to offset the header's dimension is, + * for some strange reason, inherited into each contained <tr>. + * We need to cancel it: + */ + margin-top: 0; + } + + > td, > th { + /* IE8 likes the bgcolor here instead of on the row */ + background-color: $background-color; + } +} + + +.#{$primaryStyleName}-row { + width: inherit; +} + +.#{$primaryStyleName}-cell { + display: block; + float: left; + border: 1px solid $border-color; + padding: 2px; + white-space: nowrap; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.#{$primaryStyleName}-cell.frozen { + position: relative; + z-index: 0; +} + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_form.scss b/WebContent/VAADIN/themes/valo/components/_form.scss new file mode 100644 index 0000000000..36a13dceac --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_form.scss @@ -0,0 +1,15 @@ +@mixin valo-form ($primary-stylename: v-form) { + + .#{$primary-stylename} fieldset { + border: none; + padding: 0; + margin: 0; + height: 100%; + } + + .#{$primary-stylename}-content { + height: 100%; + @include box-sizing(border-box); + } + +} diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss new file mode 100644 index 0000000000..33191e4a20 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss @@ -0,0 +1,204 @@ +@mixin valo-formlayout ($primary-stylename: v-formlayout) { + + @include valo-formlayout-spacing; + @include valo-formlayout-margins; + + .#{$primary-stylename} > table { + border-spacing: 0; + position: relative; + padding: 0 $v-layout-spacing-horizontal; + } + + .#{$primary-stylename}.v-has-width > table, + .#{$primary-stylename}.v-has-width .#{$primary-stylename}-contentcell { + width: 100%; + } + + .#{$primary-stylename}-error-indicator { + width: round($v-unit-size/2); + } + + .#{$primary-stylename}-captioncell { + vertical-align: top; + line-height: $v-unit-size - 1px; + + .v-caption { + padding-bottom: 0; + } + + .v-caption-h2, + .v-caption-h3, + .v-caption-h4 { + height: 3em; + } + } + + .#{$primary-stylename}-contentcell { + .v-checkbox, + .v-radiobutton { + font-weight: $v-font-weight + 100; + } + + > .v-label-h2, + > .v-label-h3, + > .v-label-h4 { + position: absolute; + left: 0; + margin-top: -0.5em; + padding-bottom: 0.5em; + border-bottom: valo-border($color: $v-app-background-color, $strength: 0.5); + } + } + + + +} + + +@mixin valo-formlayout-margins ($primary-stylename: v-formlayout, $all: null, $top: $v-layout-margin-top, $right: $v-layout-margin-right, $bottom: $v-layout-margin-bottom, $left: $v-layout-margin-left) { + @if $all != null { + $top: $all; + $right: $all; + $bottom: $all; + $left: $all; + } + + .#{$primary-stylename}-margin-top > tbody > .#{$primary-stylename}-firstrow { + > .#{$primary-stylename}-captioncell, + > .#{$primary-stylename}-contentcell, + > .#{$primary-stylename}-errorcell { + padding-top: $top; + } + } + + .#{$primary-stylename}-margin-bottom > tbody > .#{$primary-stylename}-lastrow { + > .#{$primary-stylename}-captioncell, + > .#{$primary-stylename}-contentcell, + > .#{$primary-stylename}-errorcell { + padding-bottom: $bottom; + } + } + + .#{$primary-stylename}-margin-left > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-captioncell { + padding-left: $left; + } + + .#{$primary-stylename}-margin-right > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-contentcell { + padding-right: $right; + } +} + + +@mixin valo-formlayout-spacing ($primary-stylename: v-formlayout, $vertical: $v-layout-spacing-vertical) { + .#{$primary-stylename}-spacing > tbody > .#{$primary-stylename}-row { + > .#{$primary-stylename}-captioncell, + > .#{$primary-stylename}-contentcell, + > .#{$primary-stylename}-errorcell { + padding-top: $vertical; + } + } +} + + + + + +@mixin valo-formlayout-light-style ($primary-stylename: v-formlayout, $row-height: $v-unit-size) { + > table { + padding: 0; + } + + > table > tbody > .#{$primary-stylename}-row { + > .#{$primary-stylename}-captioncell, + > .#{$primary-stylename}-contentcell, + > .#{$primary-stylename}-errorcell { + padding-top: 0; + height: $row-height; // Effectively min-height + } + } + + > table > tbody > .#{$primary-stylename}-row td { + border-bottom: valo-border($color: $v-app-background-color, $strength: 0.3); + } + + > table > tbody > .#{$primary-stylename}-lastrow td { + border-bottom: none; + } + + > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-captioncell { + color: valo-font-color($v-background-color, .5); + text-align: right; + padding-left: ceil($v-unit-size/3); + line-height: $row-height; + } + + .#{$primary-stylename}-contentcell { + > .v-textfield, + > .v-textarea, + > .v-filterselect, + > .v-datefield, + > .v-filterselect-input, + > .v-datefield-textfield { + width: 100%; + } + + > .v-textfield, + > .v-textarea, + > .v-filterselect input, + > .v-datefield input, + > .v-richtextarea { + @include valo-textfield-style($unit-size: $row-height, $border-radius: 0, $border: null, $bevel: none, $shadow: none, $background-color: null); + background: transparent; + border: none; + color: inherit; + } + + > .v-textfield-prompt, + > .v-textarea-prompt, + > .v-filterselect-prompt input, + > .v-datefield-prompt input { + @include valo-textfield-prompt-style; + } + + > .v-textarea, + > .v-richtextarea { + height: auto; + } + } + + .v-richtextarea { + margin: round($v-unit-size/8) 0; + } + + .v-filterselect-button, + .v-datefield-button { + border: none; + + &:active:after { + display: none; + } + } + + .v-datefield-button { + right: 0; + left: auto; + } + + .v-checkbox { + margin-left: ceil($v-unit-size/6); + } + + > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-contentcell { + > .v-label-h2, + > .v-label-h3, + > .v-label-h4 { + border-bottom: none; + color: $v-selection-color; + } + + > .v-label-h3, + > .v-label-h4 { + margin-top: 0; + } + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss new file mode 100644 index 0000000000..b1f7dbda05 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_grid.scss @@ -0,0 +1,5 @@ +@import "escalator"; + +@mixin valo-grid($primary-styleName : v-grid) { + @include valo-escalator($primary-styleName); +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_gridlayout.scss b/WebContent/VAADIN/themes/valo/components/_gridlayout.scss new file mode 100644 index 0000000000..738b86c9e2 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_gridlayout.scss @@ -0,0 +1,47 @@ +@mixin valo-gridlayout-global ($primary-stylename: v-gridlayout) { + .#{$primary-stylename} { + position: relative; + } + .#{$primary-stylename}-slot { + position: absolute; + line-height: $v-line-height; + } + .#{$primary-stylename}-spacing-on { + overflow: hidden; + } + .#{$primary-stylename}-spacing, + .#{$primary-stylename}-spacing-off { + padding-left: 0; + padding-top: 0; + } + .#{$primary-stylename}-spacing-off { + overflow: hidden; + } +} + + +@mixin valo-gridlayout($primary-stylename : v-gridlayout) { + + .#{$primary-stylename}-margin-top { + padding-top: $v-layout-margin-top; + } + + .#{$primary-stylename}-margin-bottom { + padding-bottom: $v-layout-margin-bottom; + } + + .#{$primary-stylename}-margin-left { + padding-left: $v-layout-margin-left; + } + + .#{$primary-stylename}-margin-right { + padding-right: $v-layout-margin-right; + } + + .#{$primary-stylename}-spacing-on { + padding-left: $v-layout-spacing-horizontal; + padding-top: $v-layout-spacing-vertical; + } + + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss new file mode 100644 index 0000000000..502b640809 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_label.scss @@ -0,0 +1,131 @@ +$v-font-weight--header: $v-font-weight - 100 !default; +$v-line-height--header: 1.1 !default; +$v-font-family--header: null !default; + +$v-font-size--h1: 2.4em !default; +$v-font-size--h2: 1.6em !default; +$v-font-size--h3: 1.2em !default; +$v-font-size--large: 1.2em !default; +$v-font-size--small: 0.87em !default; + +$v-font-family--h1: $v-font-family--header !default; +$v-font-family--h2: $v-font-family--header !default; +$v-font-family--h3: $v-font-family--header !default; + +$v-letter-spacing--h1: -0.03em !default; +$v-letter-spacing--h2: -0.02em !default; +$v-letter-spacing--h3: 0 !default; +$v-letter-spacing--h4: 0 !default; + + +@mixin valo-label ($primary-stylename: v-label) { + + .#{$primary-stylename}-undef-w { + white-space: nowrap; + } + + h1, .#{$primary-stylename}-h1, + h2, .#{$primary-stylename}-h2, + h3, .#{$primary-stylename}-h3 { + line-height: $v-line-height--header; + font-weight: $v-font-weight--header; + color: valo-header-color($v-app-background-color); + } + + h1, .#{$primary-stylename}-h1 { + font-size: $v-font-size--h1; + margin-top: 1.4em; + margin-bottom: 1em; + font-family: $v-font-family--h1; + letter-spacing: $v-letter-spacing--h1; + } + + h2, .#{$primary-stylename}-h2 { + font-size: $v-font-size--h2; + font-family: $v-font-family--h2; + margin-top: 1.6em; + margin-bottom: 0.77em; + letter-spacing: $v-letter-spacing--h2; + } + + h3, .#{$primary-stylename}-h3 { + font-size: $v-font-size--h3; + font-family: $v-font-family--h3; + margin-top: 1.8em; + margin-bottom: 0.77em; + letter-spacing: $v-letter-spacing--h3; + } + + h4, .#{$primary-stylename}-h4 { + line-height: $v-line-height--header; + font-weight: $v-font-weight + 200; + font-size: $v-font-size--small; + color: valo-header-color($v-app-background-color, $contrast: 0.12); + text-transform: uppercase; + letter-spacing: $v-letter-spacing--h4; + margin-top: 2.4em; + margin-bottom: 0.8em; + } + + .v-csslayout { + > h1, + > h2, + > h3, + > h4 + > .#{$primary-stylename}-h1, + > .#{$primary-stylename}-h2, + > .#{$primary-stylename}-h3 + > .#{$primary-stylename}-h4 { + &:first-child { + margin-top: $v-font-size; + } + } + } + + .v-verticallayout > .v-slot:first-child, + .v-verticallayout > div > .v-slot:first-child { + h1, .#{$primary-stylename}-h1, + h2, .#{$primary-stylename}-h2, + h3, .#{$primary-stylename}-h3 + h4, .#{$primary-stylename}-h4 { + margin-top: $v-font-size; + } + } + + h1, .#{$primary-stylename}-h1, + h2, .#{$primary-stylename}-h2, + h3, .#{$primary-stylename}-h3, + h4, .#{$primary-stylename}-h4 { + &.no-margin { + margin: 0 !important; + } + } + + .#{$primary-stylename}-large { + font-size: $v-font-size--large; + } + + .#{$primary-stylename}-small { + font-size: $v-font-size--small; + } + + .#{$primary-stylename}-bold { + font-weight: $v-font-weight + 200; + } + + .#{$primary-stylename}-light { + font-weight: $v-font-weight - 100; + @if $v-font-weight < 400 { + color: valo-font-color($v-app-background-color, .5); + } + } + + .#{$primary-stylename}-align-right { + text-align: right; + } + + .#{$primary-stylename}-align-center { + text-align: center; + } + +} diff --git a/WebContent/VAADIN/themes/valo/components/_link.scss b/WebContent/VAADIN/themes/valo/components/_link.scss new file mode 100644 index 0000000000..129ffcca2f --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_link.scss @@ -0,0 +1,39 @@ +$v-link-font-color: $v-focus-color !default; +$v-link-text-decoration: underline !default; +$v-link-cursor: pointer !default; + + +@mixin valo-link ($primary-stylename: v-link) { + .#{$primary-stylename} { + @include valo-link-style; + + a { + cursor: inherit; + color: inherit; + text-decoration: inherit; + @if $v-animations-enabled { + @include transition(inherit); + } + } + + .v-icon { + cursor: inherit; + } + } +} + + +@mixin valo-link-style { + cursor: $v-link-cursor; + color: $v-link-font-color; + text-decoration: $v-link-text-decoration; + font-weight: inherit; + + @if $v-animations-enabled { + @include transition(color 140ms); + } + + &:hover { + color: lighten($v-link-font-color, 10%); + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_loginform.scss b/WebContent/VAADIN/themes/valo/components/_loginform.scss new file mode 100644 index 0000000000..bf0c06b4d9 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_loginform.scss @@ -0,0 +1,3 @@ +@mixin valo-loginform ($primary-stylename: v-loginform) { + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss new file mode 100644 index 0000000000..75b93b646f --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss @@ -0,0 +1,327 @@ +@mixin valo-menubar ($primary-stylename: v-menubar) { + + .#{$primary-stylename} { + @include valo-button-static-style($states: normal, $vertical-centering: false); + @include valo-button-style($states: normal, $cursor: default); + padding: 0; + text-align: left; + overflow: hidden; + + &:focus:not(.v-disabled) { + @include valo-button-focus-style($border-fallback: none, $include-box-shadow: false); + $box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient); + @if type-of($v-focus-style) == list { + $box-shadow: $box-shadow, $v-focus-style; + } + @include box-shadow($box-shadow); + } + + &.v-disabled { + @include opacity($v-disabled-opacity); + } + } + + .#{$primary-stylename}:active:after { + background: transparent; + } + + .#{$primary-stylename} > .#{$primary-stylename}-menuitem { + @include valo-menubar-menuitem-style; + } + + .#{$primary-stylename} > .#{$primary-stylename}-menuitem-checked { + @include valo-menubar-menuitem-checked-style; + } + + .v-disabled > .#{$primary-stylename}-menuitem, + .#{$primary-stylename} > .#{$primary-stylename}-menuitem-disabled { + cursor: default; + + &:before { + display: none; + } + } + + .#{$primary-stylename}-menuitem-disabled { + @include opacity($v-disabled-opacity); + } + + .#{$primary-stylename} > .#{$primary-stylename}-menuitem-selected { + @include valo-button-style($states: normal, $background-color: $v-selection-color, $border-radius: 0, $shadow: null, $unit-size: null, $font-weight: null); + border-top-width: 0; + border-left-width: 0; + border-bottom-width: 0; + z-index: 2; + + &:hover:before { + background: none; + } + } + + .#{$primary-stylename} .#{$primary-stylename}-submenu-indicator { + display: none; + } + + .#{$primary-stylename}-popup { + @include valo-menubar-popup-style($primary-stylename); + + &.#{$primary-stylename}-popup-animate-out { + @include animation(none); + } + } + +} + + + + +@mixin valo-menubar-menuitem-style { + $border-width: first-number($v-border); + position: relative; + z-index: 1; + display: inline-block; + @include box-sizing(border-box); + @include valo-button-style($states: normal, $border-radius: 0, $shadow: null, $font-color: inherit, $cursor: pointer); + background: transparent; + border-width: 0 $border-width 0 0; + height: 100%; + vertical-align: top; + line-height: $v-unit-size - $border-width*2 - 1px; + text-align: center; + + @if $border-width == 0 { + margin-right: 1px; + } + + $br: $v-border-radius - $border-width - 1px; + &:first-child { + border-left-width: 0; + border-radius: $br 0 0 $br; + } + + &:last-child { + border-radius: 0 $br $br 0; + margin-right: -$border-width; + } + + &:first-child:last-child { + border-radius: $br; + border-right-width: 0; + margin-right: 0; + } + + &:before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: inherit; + } + + @if $v-hover-styles-enabled { + &:hover { + // IE needs some nudging to show the :before element + zoom: 1; + + &:before { + @include valo-button-hover-style; + border: none; + } + } + } + + &:active:before { + @include valo-button-active-style; + } + + $margin-width: ceil($v-unit-size/2.4/5); + .v-icon { + margin: 0 $margin-width 0 #{-$margin-width}; + cursor: inherit; + } + + &[class*="-icon-only"] { + width: $v-unit-size; + padding: 0; + + .v-icon { + margin: 0; + } + } +} + + + + + +@mixin valo-menubar-popup-style ($primary-stylename: v-menubar) { + @include valo-selection-overlay-style; + + margin: ceil($v-unit-size/8) 0 0 1px !important; + + .#{$primary-stylename}-submenu { + outline: none; + } + + .#{$primary-stylename}-menuitem { + display: block; + @include valo-selection-item-style; + padding-left: $v-selection-item-height + round($v-selection-item-padding-horizontal/2); // Make room for checkable icon + padding-right: $v-unit-size; + position: relative; + } + + .#{$primary-stylename}-submenu-indicator { + display: none; + + + .#{$primary-stylename}-menuitem-caption:after { + position: absolute; + right: $v-selection-item-padding-horizontal; + @include valo-menubar-submenu-indicator-style; + } + } + + .#{$primary-stylename}-menuitem-selected { + @include valo-selection-item-selected-style; + } + + .#{$primary-stylename}-separator { + display: block; + margin: $v-selection-overlay-padding-vertical 0; + height: 0; + overflow: hidden; + border-bottom: valo-border($color: $v-overlay-background-color, $strength: 0.5); + @if first-number($v-border) == 0 { + border-bottom-width: 1px; + } + } + + [class*="checked"] .#{$primary-stylename}-menuitem-caption:before { + @include valo-menubar-checked-icon-style; + position: absolute; + left: $v-selection-item-padding-horizontal; + } + + [class*="unchecked"] .#{$primary-stylename}-menuitem-caption:before { + content: ""; + } + + [class*="disabled"] { + cursor: default; + } +} + + + +@mixin valo-menubar-submenu-indicator-style { + font-family: FontAwesome; + content: "\f054"; + line-height: $v-selection-item-height + 2px; +} + +@mixin valo-menubar-checked-icon-style { + content: "\f00c"; + font-family: FontAwesome; +} + + +@mixin valo-menubar-menuitem-checked-style ($background-color: if(color-luminance($v-background-color) < 10, scale-color($v-background-color, $lightness: 10%, $saturation: -5%), scale-color($v-background-color, $lightness: -5%, $saturation: -5%))) { + $grad: valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4; + @include box-shadow(none); + @include valo-gradient($color: $background-color, $gradient: $grad, $direction: to top); + color: valo-font-color($background-color, 0.9); +} + +@mixin valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) { + .#{$primary-stylename}-menuitem-checked { + @include valo-menubar-menuitem-checked-style($background-color: $background-color); + } +} + + + +@mixin valo-menubar-small-style ($primary-stylename: v-menubar, $unit-size: round($v-unit-size * 0.8)) { + height: $unit-size; + + .#{$primary-stylename}-menuitem { + line-height: $unit-size - first-number($v-border)*2; + padding: 0 round($unit-size/2.5); + + &[class*="-icon-only"] { + width: $unit-size; + } + } +} + +@mixin valo-menubar-borderless-style ($primary-stylename: v-menubar) { + border: none; + border-radius: 0; + padding: first-number($v-border); + @include box-shadow(none); + background: transparent; + color: inherit; + + &:not(.v-disabled):focus { + border: none; + @include box-shadow(none); + } + + .#{$primary-stylename}-menuitem { + @include box-shadow(none); + border: none; + margin-right: max(1px, first-number($v-border)); + border-radius: $v-border-radius; + color: $v-selection-color; + text-shadow: valo-text-shadow($font-color: $v-selection-color, $offset: -1px); + padding: 0 round($v-unit-size/3); + + @if $v-animations-enabled { + @include transition(color 140ms); + } + + &:first-child, + &:last-child { + border-radius: $v-border-radius; + } + + &:before { + content: none; + } + + &:hover { + color: lighten($v-selection-color, 10%); + } + + &:active { + color: inherit; + } + } + + .#{$primary-stylename}-menuitem-checked, + .#{$primary-stylename}-menuitem-checked:first-child { + border: valo-border(); + color: $v-selection-color; + + .#{$primary-stylename}-menuitem-caption { + position: relative; + top: first-number($v-border)*-1; + } + } + + .#{$primary-stylename}-menuitem-selected { + $font-color: valo-font-color($v-selection-color, 0.9); + color: $font-color; + text-shadow: valo-text-shadow($background-color: $v-selection-color, $font-color: $font-color); + + &:hover { + color: $font-color; + } + } + + .#{$primary-stylename}-menuitem-disabled, + .#{$primary-stylename}-menuitem-disabled:hover { + color: inherit; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_nativebutton.scss b/WebContent/VAADIN/themes/valo/components/_nativebutton.scss new file mode 100644 index 0000000000..69c48d4649 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_nativebutton.scss @@ -0,0 +1,5 @@ +@mixin valo-nativebutton ($primary-stylename: v-nativebutton) { + .#{$primary-stylename} { + -webkit-touch-callout: none; + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss new file mode 100644 index 0000000000..80e9ab8000 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss @@ -0,0 +1,31 @@ +@mixin valo-nativeselect ($primary-stylename: v-select) { + .#{$primary-stylename} select { + @include valo-nativeselect-select-style; + } + + .#{$primary-stylename}-select { + display: block; + + + .v-textfield { + width: auto !important; + margin-top: round($v-unit-size/4); + + + .v-nativebutton { + margin-top: round($v-unit-size/4); + margin-left: round($v-unit-size/4); + } + } + } +} + + + +@mixin valo-nativeselect-select-style { + border: valo-border(); + @include valo-gradient; + + &:focus { + outline: none; + @include valo-focus-style($include-box-shadow: true); + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss new file mode 100644 index 0000000000..71c67cd9d8 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss @@ -0,0 +1,84 @@ +@mixin valo-optiongroup ($primary-stylename: v-optiongroup) { + + .v-radiobutton { + @include valo-radiobutton-style; + } + + .v-select-optiongroup { + @include valo-optiongroup-style; + } + +} + + +@mixin valo-radiobutton-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) { + @include valo-checkbox-style($background-color: $background-color, $unit-size: $unit-size, $selection-color: $selection-color); + + :root & > input { + &:checked ~ label:after { + $size: ceil($unit-size/6); + $offset: round($unit-size/6); + width: $size; + height: $size; + top: $offset; + left: $offset; + background: $selection-color; + } + + & ~ label:before, + & ~ label:after { + border-radius: 50%; + content: ""; + } + } +} + + + +@mixin valo-optiongroup-style ($unit-size: $v-unit-size, $font-size: $v-font-size) { + + @if $unit-size != $v-unit-size { + .v-checkbox { + @include valo-checkbox-style($unit-size: $unit-size); + } + .v-radiobutton { + @include valo-radiobutton-style($unit-size: $unit-size); + } + } + + .v-radiobutton, + .v-checkbox { + display: block; + margin: round($unit-size/4) $font-size 0 0; + + &:first-child { + margin-top: round($unit-size/6); + } + + &:last-child { + margin-bottom: round($unit-size/6); + } + } + + &.v-has-width label { + white-space: normal; + } +} + + +@mixin valo-optiongroup-horizontal { + white-space: nowrap; + + .v-radiobutton, + .v-checkbox { + display: inline-block; + } + + &.v-has-width { + white-space: normal; + + label { + white-space: nowrap; + } + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss new file mode 100644 index 0000000000..1173ca3dbe --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss @@ -0,0 +1,180 @@ +@mixin valo-orderedlayout-global { + + div.v-layout.v-horizontal.v-widget { + white-space: nowrap; + } + + .v-layout.v-vertical > .v-expand, + .v-layout.v-horizontal > .v-expand { + @include box-sizing(border-box); + width: 100%; + height: 100%; + } + + .v-slot, + .v-spacing { + display: inline-block; + white-space: nowrap; + vertical-align: top; + } + + // Clear any floats inside the slot, to prevent unwanted collapsing + .v-vertical > .v-slot:after { + display: inline-block; + clear: both; + width: 0; + height: 0; + overflow: hidden; + } + + .v-vertical > .v-slot, + .v-vertical > .v-expand > .v-slot { + display: block; + clear: both; + } + + .v-horizontal > .v-slot, + .v-horizontal > .v-expand > .v-slot { + height: 100%; + } + + .v-vertical > .v-spacing, + .v-vertical > .v-expand > .v-spacing { + width: 0 !important; + display: block; + clear: both; + } + + .v-horizontal > .v-spacing, + .v-horizontal > .v-expand > .v-spacing { + height: 0 !important; + } + + .v-align-middle:before, + .v-align-bottom:before, + .v-expand > .v-align-middle:before, + .v-expand > .v-align-bottom:before { + content: ""; + display: inline-block; + height: 100%; + vertical-align: middle; + width: 0; + } + + .v-align-middle, + .v-align-bottom { + white-space: nowrap; + } + + .v-align-middle > .v-widget, + .v-align-bottom > .v-widget { + display: inline-block; + } + + .v-align-middle, + .v-align-middle > .v-widget { + vertical-align: middle; + } + + .v-align-bottom, + .v-align-bottom > .v-widget { + vertical-align: bottom; + } + + .v-align-center { + text-align: center; + } + + .v-align-center > .v-widget { + margin-left: auto; + margin-right: auto; + } + + .v-align-right { + text-align: right; + } + + .v-align-right > .v-widget { + margin-left: auto; + } + + .v-has-caption, + .v-has-caption > .v-caption { + // Force natural width to zero + display: inline-block; + } + + .v-caption-on-left, + .v-caption-on-right { + white-space: nowrap; + } + + .v-caption-on-top > .v-caption, + .v-caption-on-bottom > .v-caption { + display: block; + } + + .v-caption-on-left > .v-caption { + padding-right: .5em; + } + + .v-caption-on-right > .v-caption { + //vertical-align: top; + } + + .v-caption-on-left > .v-widget, + .v-caption-on-right > .v-widget { + display: inline-block; + //vertical-align: middle; + } + + .v-has-caption.v-has-width > .v-widget { + width: 100% !important; + } + + .v-has-caption.v-has-height > .v-widget { + height: 100% !important; + } + +} + + + +@mixin valo-orderedlayout { + + .v-margin-top { + padding-top: $v-layout-margin-top; + } + + .v-margin-right { + padding-right: $v-layout-margin-right; + } + + .v-margin-bottom { + padding-bottom: $v-layout-margin-bottom; + } + + .v-margin-left { + padding-left: $v-layout-margin-left; + } + + .v-spacing { + width: $v-layout-spacing-horizontal; + height: $v-layout-spacing-vertical; + } + +} + + +@mixin valo-horizontallayout--wrapping { + white-space: normal !important; + + & > .v-spacing + .v-slot, + & > .v-slot:first-child { + margin-bottom: $v-layout-spacing-vertical; + } + + & > .v-slot:first-child:last-child { + margin-bottom: 0; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss new file mode 100644 index 0000000000..542c14ea64 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_panel.scss @@ -0,0 +1,146 @@ +$v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $saturation: -5%) !default; +$v-panel-border: $v-border !default; + +@mixin valo-panel ($primary-stylename: v-panel) { + + .#{$primary-stylename} { + @include valo-panel-style; + } + + .#{$primary-stylename}-caption { + @include valo-panel-caption-style; + border-radius: $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0; + } + + .#{$primary-stylename}-content { + @include box-sizing(border-box); + width: 100%; + height: 100%; + @include valo-panel-adjust-content-margins; + } + +} + + + +@mixin valo-panel-style ( + $primary-stylename: v-panel, + $background-color : $v-panel-background-color, + $shadow : $v-shadow, + $border : $v-panel-border, + $border-radius : $v-border-radius + ) { + background: $background-color; + color: valo-font-color($background-color); + border-radius: $border-radius; + border: valo-border($border: $border, $color: darkest-color($background-color, $v-app-background-color), $strength: 0.7); + @include box-shadow(valo-bevel-and-shadow($shadow: $shadow)); +} + + + +@mixin valo-panel-caption-style ( + $background-color : $v-background-color, + $bevel : first($v-bevel), + $gradient : valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4, + $border : $v-panel-border + ) { + @include box-sizing(border-box); + padding: 0 round($v-unit-size/3); + line-height: $v-unit-size - first-number($v-border); + $bg: $background-color; + border-bottom: valo-border($border: $border, $color: $bg, $strength: 0.5); + @include valo-gradient($color: $bg, $gradient: $gradient); + color: valo-font-color($bg); + font-weight: $v-caption-font-weight; + font-size: $v-caption-font-size; + @include box-shadow(valo-bevel-and-shadow($background-color: $bg, $bevel: $bevel, $gradient: $gradient)); + text-shadow: valo-text-shadow(valo-font-color($bg), $bg, $v-bevel); +} + + + +@mixin valo-panel-well-style ($shadow: (0 1px 0 0 v-tint, join(inset, $v-shadow))) { + $bg: scale-color(adjust-color($v-background-color, $lightness: -2%), $saturation: -1.5%); + background: $bg; + color: valo-font-color($bg); + @include box-shadow(valo-bevel-and-shadow($shadow: $shadow)); + border-radius: $v-border-radius; + border: valo-border(); + + > div > .v-panel-caption { + background: transparent; + @include box-shadow(none); + } +} + + + +@mixin valo-panel-borderless-style { + background: transparent; + color: inherit; + border: none; + border-radius: 0; + @include box-shadow(none); + + > div > .v-panel-caption { + background: transparent; + @include box-shadow(none); + color: inherit; + padding: 0; + margin: 0 round($v-unit-size/3); + border-bottom: none; + } +} + + + +@mixin valo-panel-scroll-divider-style ($border-width: max(1px, first-number($v-panel-border))) { + > .v-panel-captionwrap { + position: relative; + z-index: 2; + + &:after { + content: ""; + position: absolute; + bottom: -$border-width; + right: 0; + left: 0; + height: 0; + border-top: $border-width solid first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); + } + } + + > .v-panel-content { + &:before { + content: ""; + position: absolute; + z-index: 2; + top: 0; + height: 0; + border-top: $border-width solid $v-app-background-color; + left: 0; + right: 0; + } + } +} + + + +@mixin valo-panel-adjust-content-margins { + > .v-margin-top { + padding-top: round($v-unit-size/3); + } + + > .v-margin-right { + padding-right: round($v-unit-size/3); + } + + > .v-margin-bottom { + padding-bottom: round($v-unit-size/3); + } + + > .v-margin-left { + padding-left: round($v-unit-size/3); + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_popupview.scss b/WebContent/VAADIN/themes/valo/components/_popupview.scss new file mode 100644 index 0000000000..794a6997de --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_popupview.scss @@ -0,0 +1,24 @@ +@include keyframes(v-popupview-animate-in) { + 0% { + @include transform(scale(0)); + } +} + +@mixin valo-popupview ($primary-stylename: v-popupview) { + .#{$primary-stylename} { + @include valo-link-style; + } + + .#{$primary-stylename}-popup { + @include valo-overlay-style($animate-in: v-popupview-animate-in 120ms, $animate-out: (valo-placeholder-animate-out 120ms, valo-anim-fade-out 120ms)); + + .popupContent { + @include valo-panel-adjust-content-margins; + } + } + + .#{$primary-stylename}-loading { + margin: $v-layout-spacing-vertical $v-layout-spacing-horizontal; + @include valo-spinner; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_progressbar.scss b/WebContent/VAADIN/themes/valo/components/_progressbar.scss new file mode 100644 index 0000000000..f5836c7eaf --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_progressbar.scss @@ -0,0 +1,68 @@ +$v-progressbar-border-radius: $v-border-radius !default; + + +@mixin valo-progressbar ($primary-stylename: v-progressbar) { + + .#{$primary-stylename}-wrapper { + @include valo-progressbar-track-style; + min-width: $v-unit-size * 2; + } + + .#{$primary-stylename}-indicator { + @include valo-progressbar-indicator-style; + min-width: max($v-border-radius*2, 3px); + @include transition(width 160ms ); + } + + + .#{$primary-stylename}-point { + .#{$primary-stylename}-indicator { + background: transparent; + @include box-shadow(none); + border: none; + text-align: right; + overflow: hidden; + + &:before { + content: ""; + display: inline-block; + @include valo-progressbar-indicator-style; + width: round($v-unit-size/4); + vertical-align: top; + } + } + } + + .#{$primary-stylename}-indeterminate { + @include valo-spinner; + + .#{$primary-stylename}-wrapper { + display: none; + } + } + +} + + +@mixin valo-progressbar-track-style ($background-color: $v-background-color) { + border-radius: $v-progressbar-border-radius; + height: round($v-unit-size/4); + $bg-lightness: if(color-luminance($background-color) < 10, min($v-bevel-depth/2, 10%), min($v-bevel-depth/-2, -10%)); + @include valo-gradient($color: scale-color($background-color, $lightness: $bg-lightness, $saturation: $v-bevel-depth/-2), $direction: to top); + @include box-sizing(border-box); +} + + +@mixin valo-progressbar-indicator-style ($background-color: $v-selection-color, $border: $v-border) { + border-radius: $v-progressbar-border-radius; + height: inherit; + @include valo-gradient($color: $background-color); + @include box-shadow(valo-bevel-and-shadow($background-color: $background-color)); + @if $border { + border: valo-border($border: $border, $color: $background-color, $context: $v-app-background-color); + } @else { + border: none; + } + @include box-sizing(border-box); + max-width: 100%; +} diff --git a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss new file mode 100644 index 0000000000..702bda2ac4 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss @@ -0,0 +1,98 @@ +$valo-richtextarea-use-font-awesome: true !default; + +@mixin valo-richtextarea ($primary-stylename: v-richtextarea) { + .#{$primary-stylename} { + @include valo-textfield-style($states: normal, $padding: 0); + height: auto; + overflow: hidden; + } + + .#{$primary-stylename} .gwt-RichTextToolbar { + @include valo-gradient($color: $v-background-color); + @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-background-color, $gradient: $v-gradient)); + border-bottom: valo-border(); + color: valo-font-color($v-background-color); + } + + .#{$primary-stylename} .gwt-ToggleButton, + .#{$primary-stylename} .gwt-PushButton { + display: inline-block; + line-height: $v-unit-size; + width: $v-unit-size; + text-align: center; + outline: none; + + &:hover { + color: valo-font-color($v-background-color, 1); + } + } + + .#{$primary-stylename} .gwt-ToggleButton-down, + .#{$primary-stylename} .gwt-ToggleButton-down-hovering { + $grad: valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4; + //box-shadow: none; + @include valo-gradient($color: darken($v-background-color, 10%), $gradient: $grad, $direction: to top); + } + + @if $valo-richtextarea-use-font-awesome { + + // List of title attribute values and Font Awesome icons for the formatting buttons + $icons: "Toggle Bold" "\f032", + "Toggle Italic" "\f033", + "Toggle Underline" "\f0cd", + "Toggle Subscript" "\f12c", + "Toggle Superscript" "\f12b", + "Left Justify" "\f036", + "Center" "\f037", + "Right Justify" "\f038", + "Toggle Strikethrough" "\f0cc", + "Indent Right" "\f03c", + "Indent Left" "\f03b", + "Insert Horizontal Rule" "—", + "Insert Ordered List" "\f0cb", + "Insert Unordered List" "\f0ca", + "Insert Image" "\f03e", + "Create Link" "\f0c1", + "Remove Link" "\f127", + "Remove Formatting" "\f12d"; + + .#{$primary-stylename} .gwt-RichTextToolbar-top { + img { + display: none; + } + + div:before { + font-family: FontAwesome; + } + + @each $pair in $icons { + $first-of-pair: first($pair); + $last-of-pair: last($pair); + div[title="#{$first-of-pair}"]:before { + content: "#{$last-of-pair}"; + } + } + } + } // Use FontAwesome + + .#{$primary-stylename} .gwt-RichTextToolbar-bottom { + font-size: round($v-font-size * 0.8); + padding: 0 round($v-unit-size/4) round($v-unit-size/4) 0; + + select { + margin: round($v-unit-size/4) 0 0 round($v-unit-size/4); + } + } + + .#{$primary-stylename} .gwt-RichTextArea { + background: #fff; + border: none; + display: block; + } + + .#{$primary-stylename}-readonly { + padding: ceil($v-unit-size/9) ceil($v-unit-size/6); + background: transparent; + } + +} diff --git a/WebContent/VAADIN/themes/valo/components/_slider.scss b/WebContent/VAADIN/themes/valo/components/_slider.scss new file mode 100644 index 0000000000..b4785a8471 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_slider.scss @@ -0,0 +1,264 @@ +$v-slider-track-size: round($v-unit-size/8) !default; +$v-slider-track-border-radius: null !default; +$v-slider-handle-width: round($v-unit-size/1.8) !default; +$v-slider-handle-height: round($v-unit-size/1.8) !default; +$v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default; + +$_valo-slider-base-margin-vertical: round(($v-unit-size - $v-slider-track-size)/2); +$_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2); + + +@mixin valo-slider ($primary-stylename: v-slider) { + + // Round to an even number + $v-slider-track-size: $v-slider-track-size + $v-slider-track-size%2; + $v-slider-handle-width: $v-slider-handle-width + $v-slider-handle-width%2; + $v-slider-handle-height: $v-slider-handle-height + $v-slider-handle-height%2; + + .#{$primary-stylename} { + position: relative; + + &:focus { + outline: none; + + .#{$primary-stylename}-handle:after { + opacity: 1; + + .v-ie8 & { + visibility: visible; + } + } + } + + &.v-disabled { + @include opacity($v-disabled-opacity); + } + } + + .#{$primary-stylename}-base { + @include valo-progressbar-track-style; + min-width: $v-unit-size * 2; + height: $v-slider-track-size; + margin: $_valo-slider-base-margin-vertical $_valo-slider-base-margin-horizontal; + white-space: nowrap; + overflow: hidden; + border-radius: $v-slider-track-border-radius; + + &:before { + content: ""; + position: absolute; + top: $_valo-slider-base-margin-vertical; + bottom: $_valo-slider-base-margin-vertical; + left: $_valo-slider-base-margin-horizontal; + width: $v-border-radius * 2; + border-radius: $v-border-radius; + border-left: valo-border($color: $v-selection-color, $context: $v-app-background-color); + } + + &:after { + @include valo-progressbar-indicator-style; + content: ""; + display: inline-block; + margin-left: -100%; + width: 100%; + vertical-align: top; + + .v-ie8 & { + position: relative; + left: round(-$v-slider-handle-width/2); + } + } + } + + .v-has-width > .#{$primary-stylename}-base { + min-width: 0; + } + + .#{$primary-stylename}-handle { + margin-top: round(($v-unit-size - $v-slider-track-size)/-2); + width: .1px; // Firefox needs a non-zero value + display: inline-block; + vertical-align: top; + + &:before { + @include valo-button-style; + } + + &:after { + border: valo-border(); + @include valo-button-focus-style($border-fallback: null); + opacity: 0; + @if $v-animations-enabled { + @include transition(opacity 200ms); + } + + .v-ie8 & { + visibility: hidden; + } + } + + &:before, + &:after { + content: ""; + @include box-sizing(border-box); + padding: 0; + width: $v-slider-handle-width; + height: $v-slider-handle-height; + border-radius: $v-slider-handle-border-radius; + position: absolute; + z-index: 1; + margin-top: round(($v-unit-size - $v-slider-handle-height)/2); + margin-left: round($v-slider-handle-width/-2); + } + } + + .#{$primary-stylename}-feedback { + @include valo-tooltip-style; + } + + + + // Vertical + + + + .#{$primary-stylename}-vertical { + padding: round($v-slider-handle-width/2) 0; + height: $v-unit-size * 2 + $v-slider-handle-width; // Effectively min-height + + .#{$primary-stylename}-base { + $bg-lightness: if(color-luminance($v-background-color) < 10, min($v-bevel-depth/2, 10%), min($v-bevel-depth/-2, -10%)); + @include valo-gradient($color: scale-color($v-background-color, $lightness: $bg-lightness, $saturation: $v-bevel-depth/-2), $direction: to left); + width: $v-slider-track-size; + height: 100% !important; + min-width: 0; + margin: 0 round(($v-unit-size - $v-slider-track-size)/2); + + &:before { + top: auto; + bottom: $_valo-slider-base-margin-horizontal; + left: $_valo-slider-base-margin-vertical; + right: $_valo-slider-base-margin-vertical; + width: auto; + height: $v-border-radius * 2; + border-left: none; + border-bottom: valo-border($color: $v-selection-color, $context: $v-app-background-color); + } + + &:after { + height: 101%; + margin-left: 0; + @include valo-gradient($color: $v-selection-color, $direction: to right); + + .v-ie8 & { + top: round($v-slider-handle-width/2); + left: 0; + height: 130%; + } + } + } + + .#{$primary-stylename}-handle { + width: 0; + height: .1px; + width: $v-unit-size; + display: block; + + &:before, + &:after { + width: $v-slider-handle-height; + height: $v-slider-handle-width; + margin-top: round($v-slider-handle-width/-2); + margin-left: round(($v-slider-handle-height - $v-slider-track-size)/-2); + } + } + } + +} + + + +@mixin valo-slider-track-style ($primary-stylename: v-slider, $background-color: $v-background-color) { + .#{$primary-stylename}-base { + @include valo-progressbar-track-style($background-color: $background-color); + height: $v-slider-track-size; + } + + &.#{$primary-stylename}-vertical { + .#{$primary-stylename}-base { + $bg-lightness: if(color-luminance($background-color) < 10, min($v-bevel-depth/2, 10%), min($v-bevel-depth/-2, -10%)); + @include valo-gradient($color: scale-color($background-color, $lightness: $bg-lightness, $saturation: $v-bevel-depth/-2), $direction: to left); + } + } +} + +@mixin valo-slider-indicator-style ($primary-stylename: v-slider, $background-color: $v-selection-color, $border: $v-border) { + .#{$primary-stylename}-base { + &:before { + border-color: first-color(valo-border($border: $border, $color: $background-color, $context: $v-app-background-color)); + } + + &:after { + @include valo-progressbar-indicator-style($background-color: $background-color, $border: $border); + } + } + + &.#{$primary-stylename}-vertical { + .#{$primary-stylename}-base { + &:after { + @include valo-gradient($color: $background-color, $direction: to right); + } + } + } +} + + +@mixin valo-slider-no-indicator ($primary-stylename: v-slider) { + .#{$primary-stylename}-base:before, + .#{$primary-stylename}-base:after { + display: none; + } +} + + +@mixin valo-slider-handle-style ($primary-stylename: v-slider, $background-color: $v-background-color) { + .#{$primary-stylename}-handle { + &:before { + @include valo-button-style($background-color: $background-color, $unit-size: null, $border-radius: null); + } + + &:after { + border: valo-border($color: $background-color); + @include valo-button-focus-style($background-color: $background-color, $border-fallback: null); + } + } +} + + +@mixin valo-slider-ticks ($primary-stylename: v-slider, $tick-count: 5) { + $tick-size: max(1px, first-number($v-border)); + $tick-color: first-color(valo-border($strength: 0.7)); + + &:before { + content: ""; + height: 15%; + position: absolute; + @include linear-gradient(to right, $tick-color $tick-size, transparent $tick-size, $fallback: transparent); + background-repeat: repeat-x; + background-size: 100%/($tick-count - 1) - 0.1% 100%; + left: $_valo-slider-base-margin-horizontal; + right: $_valo-slider-base-margin-horizontal; + } + + &.#{$primary-stylename}-vertical:before { + height: auto; + width: 15%; + @include linear-gradient(to bottom, $tick-color $tick-size, transparent $tick-size, $fallback: transparent); + background-repeat: repeat-y; + background-size: 100% 100%/($tick-count - 1) - 0.01%; + right: auto; + left: 0; + top: $_valo-slider-base-margin-horizontal; + bottom: $_valo-slider-base-margin-horizontal; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss new file mode 100644 index 0000000000..e05eb08d16 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss @@ -0,0 +1,197 @@ +@mixin valo-splitpanel($primary-stylename : v-splitpanel) { + // No need for parent selector + @include valo-splitpanel-style($primary-stylename: $primary-stylename); +} + + + + +@mixin valo-splitpanel-global ($primary-stylename : v-splitpanel) { + .#{$primary-stylename}-vertical, + .#{$primary-stylename}-horizontal { + overflow: hidden; + white-space: nowrap; + } + + .#{$primary-stylename}-hsplitter { + z-index: 100; + cursor: e-resize; + cursor: col-resize; + } + + .#{$primary-stylename}-vsplitter { + z-index: 100; + cursor: s-resize; + cursor: row-resize; + } + + // Element which acts as the active dragging area + .#{$primary-stylename}-hsplitter, + .#{$primary-stylename}-vsplitter { + &:after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + div { + width: inherit; + height: inherit; + overflow: hidden; + position: relative; + } + } + + .#{$primary-stylename}-hsplitter div, + .#{$primary-stylename}-vsplitter div { + &:before { + @include box-sizing(border-box); + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + } + + .v-disabled [class$="splitter"] div { + cursor: default; + + &:before { + display: none; + } + } + + // Allow undefined/auto height for horizontal split + + .#{$primary-stylename}-horizontal { + .#{$primary-stylename}-second-container { + position: static !important; + display: inline-block; + vertical-align: top; + } + + .#{$primary-stylename}-first-container { + display: inline-block; + vertical-align: top; + } + } +} + + + + +@mixin valo-splitpanel-style( + $primary-stylename : v-splitpanel, + $splitter-size: max(1px, first-number($v-border)), + $splitter-active-size: round($v-unit-size/3), + $splitter-handle-visible: false, + $splitter-shadow: none, + $orientation: vertical horizontal + ) { + + @if contains($orientation, horizontal) { + .#{$primary-stylename}-hsplitter { + width: $splitter-size; + } + } + + @if contains($orientation, vertical) { + .#{$primary-stylename}-vsplitter { + height: $splitter-size; + } + } + + $offset: round(($splitter-active-size - $splitter-size)/-2); + + @if contains($orientation, horizontal) { + .#{$primary-stylename}-hsplitter:after { + left: $offset; + right: $offset; + } + } + + @if contains($orientation, vertical) { + .#{$primary-stylename}-vsplitter:after { + top: $offset; + bottom: $offset; + } + } + + @if contains($orientation, horizontal) or contains($orientation, vertical) { + .#{$primary-stylename}-hsplitter div, + .#{$primary-stylename}-vsplitter div { + &:before { + @include valo-button-style($shadow: $splitter-shadow); + height: auto; + padding: 0; + border-radius: 0; + } + } + } + + @if contains($orientation, horizontal) { + .#{$primary-stylename}-hsplitter div { + &:before { + $color: $v-background-color; + @include valo-gradient($color: $color, $direction: to right); + } + } + } + + @if $splitter-handle-visible { + .#{$primary-stylename}-vsplitter div, + .#{$primary-stylename}-hsplitter div { + &:after { + @include valo-splitpanel-splitter-handle-style; + } + } + + @if contains($orientation, horizontal) { + .#{$primary-stylename}-hsplitter div { + &:after { + @include valo-splitpanel-splitter-handle-style($horizontal: true, $include-common: false); + } + } + } + } + + @if contains($orientation, horizontal) { + &.#{$primary-stylename}-horizontal { + .#{$primary-stylename}-second-container { + margin-left: $splitter-size; + } + } + } +} + + + +@mixin valo-splitpanel-splitter-handle-style ($horizontal: false, $include-common: true) { + @if $include-common { + content: ""; + border: valo-border($strength: 0.6); + $border-color: first-color(valo-border($strength: 1.2)); + border-top-color: $border-color; + border-left-color: $border-color; + position: absolute; + top: 50%; + left: 50%; + } + + @if $horizontal { + width: 0; + height: $v-unit-size; + margin-left: first-number($v-border)*-1; + margin-top: round(-$v-unit-size/2); + } @else { + width: $v-unit-size; + height: 0; + margin-left: round(-$v-unit-size/2); + margin-top: first-number($v-border)*-1; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss new file mode 100644 index 0000000000..deef084561 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -0,0 +1,629 @@ +$v-table-row-height: $v-unit-size !default; +$v-table-border-width: first-number($v-border) !default; +$v-table-border-color: null !default; +$v-table-border-radius: 0 !default; +$v-table-cell-padding-horizontal: round($v-unit-size/3) !default; +//$v-table-cell-padding-horizontal-edge: round($v-unit-size/2.5) !default; +$v-table-resizer-width: round($v-unit-size/5) !default; +$v-table-sort-indicator-width: round($v-unit-size/2) !default; +$v-table-header-font-size: round($v-font-size * 0.86) !default; +$v-table-background-color: null !default; + + + +@mixin valo-table-global ($primary-stylename: v-table) { + + .#{$primary-stylename}-header table, + .#{$primary-stylename}-footer table, + .#{$primary-stylename}-table { + border-spacing: 0; + border-collapse: separate; + margin: 0; + padding: 0; + border: 0; + line-height: $v-line-height; + } + + .#{$primary-stylename}-resizer, + .#{$primary-stylename}-sort-indicator { + float: right; + } + + .#{$primary-stylename}-caption-container-align-center { + text-align: center; + } + + .#{$primary-stylename}-caption-container-align-right { + text-align: right; + } + + .#{$primary-stylename}-header td, + .#{$primary-stylename}-footer td, + .#{$primary-stylename}-cell-content { + padding: 0; + } + + .#{$primary-stylename}-sort-indicator { + width: 0; + } + +} + + + + +@function valo-table-background-color($context: $v-background-color) { + @if is-dark-color($context) { + @return darken($context, 2%); + } + @return lighten($context, 2%); +} + + +@mixin valo-table ($primary-stylename: v-table) { + + $background-color: $v-table-background-color or valo-table-background-color(); + $border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.8)); + + .#{$primary-stylename} { + // For scroll position indicator + position: relative; + background: $v-background-color; + color: valo-font-color($v-background-color); + } + + .v-table-header table, + .v-table-footer table, + .v-table-table { + @include box-shadow(0 0 0 $v-table-border-width $border-color); + + .v-ie8 & { + outline: $v-table-border-width solid $border-color; + } + } + + .#{$primary-stylename}-header-wrap, + .#{$primary-stylename}-footer-wrap, + .#{$primary-stylename}-header-drag { + border: $v-table-border-width solid $border-color; + @include valo-gradient($v-background-color); + white-space: nowrap; + font-size: $v-table-header-font-size; + text-shadow: valo-text-shadow(); + } + + .#{$primary-stylename}-header-wrap { + position: relative; + border-bottom: none; + @if $v-table-border-radius > 0 { + border-radius: $v-table-border-radius $v-table-border-radius 0 0; + } + } + + .#{$primary-stylename}-footer-wrap { + border-top: none; + @if $v-table-border-radius > 0 { + border-radius: 0 0 $v-table-border-radius $v-table-border-radius; + } + } + + .#{$primary-stylename}-footer td { + border-left: $v-table-border-width solid $border-color; + // Hack to overcome fixed "magic number" in VScrollTable.FooterCell (assumes 1px border) + @if $v-table-border-width != 1px { + display: inline-block; + margin-left: ($v-table-border-width - 1px) * -1; + + &:first-child { + margin-left: 0; + } + } + } + + .#{$primary-stylename}-footer-container, + .#{$primary-stylename}-caption-container { + overflow: hidden; + line-height: 1; + @include box-sizing(border-box); + } + + .#{$primary-stylename}-footer-container { + $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2); + padding: $vertical-padding - $v-table-border-width $v-table-cell-padding-horizontal $vertical-padding; + float: right; + } + + [class^="#{$primary-stylename}-header-cell"] { + position: relative; + } + + .#{$primary-stylename}-caption-container, + .#{$primary-stylename}-header-drag { + $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2); + padding: $vertical-padding $v-table-cell-padding-horizontal $vertical-padding - $v-table-border-width; + border-left: $v-table-border-width solid $border-color; + } + + .#{$primary-stylename}-caption-container-align-right { + padding-right: $v-table-cell-padding-horizontal - $v-table-resizer-width; + } + + .#{$primary-stylename}-resizer { + height: $v-table-row-height; + width: $v-table-resizer-width; + cursor: e-resize; + cursor: col-resize; + position: absolute; + top: 0; + right: 0; + z-index: 1; + } + + .#{$primary-stylename}-cell-content { + border-left: $v-table-border-width solid $border-color; + overflow: hidden; + + &:first-child { + border-left: none; + padding-left: $v-table-border-width; + } + } + + .#{$primary-stylename}-header td:first-child .#{$primary-stylename}-caption-container, + .#{$primary-stylename}-footer td:first-child { + border-left-color: transparent; + } + + + .#{$primary-stylename}-cell-wrapper { + line-height: 1; + $vertical-padding: round(($v-table-row-height - $v-font-size)/2); + padding: $vertical-padding $v-table-cell-padding-horizontal; + @include box-sizing(border-box); + margin-right: 0 !important; + } + + .#{$primary-stylename}-body { + border: $v-table-border-width solid $border-color; + } + + .#{$primary-stylename}-table { + background-color: $background-color; + white-space: nowrap; + } + + .#{$primary-stylename}-table td { + border-top: $v-table-border-width solid $border-color; + } + + .#{$primary-stylename}-table tr:first-child td { + border-top: none; + } + + .#{$primary-stylename}-row { + background-color: $background-color; + } + + .#{$primary-stylename}-row-odd { + $bg-lightness: if(color-luminance($background-color) < 10, 4%, -4%); + background-color: scale-color($background-color, $lightness: $bg-lightness); + } + + .#{$primary-stylename} [class*="-row"].v-selected { + $selected-border-color: adjust-color($v-selection-color, $lightness: -8%, $saturation: -8%); + + @include valo-gradient($v-selection-color); + background-origin: border-box; + color: valo-font-color($v-selection-color, 0.9); + text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth); + + + .v-selected { + $gradient-end: first(last(valo-gradient-color-stops($v-selection-color))); + background: $gradient-end; + + td { + border-top-color: $gradient-end; + } + } + + .#{$primary-stylename}-cell-content { + border-color: transparent; + border-left-color: $selected-border-color; + + &:first-child { + border-left-color: transparent; + } + } + } + + .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator, + .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator { + background: transparent; + width: $v-table-sort-indicator-width; + height: $v-table-row-height; + line-height: $v-table-row-height; + position: absolute; + right: 0; + } + + .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before, + .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator:before { + font-style: normal; + font-weight: normal; + display: inline-block; + } + + .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before { + @include valo-table-sort-asc-icon-style; + } + + .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator:before { + @include valo-table-sort-desc-icon-style; + } + + + [class*="rowheader"] span.v-icon { + min-width: 1em; + } + + + .#{$primary-stylename}-focus { + $outline-width: max($v-table-border-width, 1px); + outline: $outline-width solid $v-focus-color; + outline-offset: -$outline-width; + } + + .v-drag-element.#{$primary-stylename}-focus, + .v-drag-element .#{$primary-stylename}-focus { + outline: none; + } + + .#{$primary-stylename}-header-drag { + position: absolute; + @include opacity(0.9); + margin-top: round($v-table-row-height/-2); + z-index: 30000; + line-height: 1; + } + + .#{$primary-stylename}-focus-slot-right { + border-right: 2px solid rgba($v-focus-color, .5); + } + + .#{$primary-stylename}-focus-slot-left { + border-left: 2px solid rgba($v-focus-color, .5); + left: 0; + right: auto; + margin-left: 0 !important; + } + + .#{$primary-stylename}-column-selector { + @include valo-button-style; + position: absolute; + z-index: 2; + top: round($v-unit-size/-4); + right: round($v-unit-size/-4); + height: round($v-unit-size/2); + line-height: round($v-unit-size/2); + width: round($v-unit-size/2); + padding: 0; + border-radius: 50%; + cursor: pointer; + text-align: center; + + @include opacity(0); + @if $v-animations-enabled { + @include transition(opacity 200ms 1s); + } + + &:after { + content: ""; + position: absolute; + $v-button-border-width: first-number($v-border); + top: -$v-button-border-width; + right: -$v-button-border-width; + bottom: -$v-button-border-width; + left: -$v-button-border-width; + border-radius: inherit; + } + &:active:after { + @include valo-button-active-style; + } + &:before { + @include valo-table-column-selector-icon-style; + } + } + + .v-scrollable > .#{$primary-stylename} .#{$primary-stylename}-column-selector { + right: 0; + top: 0; + border-top: none; + border-right: none; + border-radius: 0 0 0 50%; + + &:after { + top: 0; + right: 0; + } + } + + .#{$primary-stylename}-header-wrap:hover .#{$primary-stylename}-column-selector { + @include opacity(1); + @include transition-delay(100ms); + } + + .v-on, + .v-off { + &:before { + @include valo-table-column-visible-icon-style; + font-size: 0.9em; + margin-right: round($v-unit-size/6); + } + div { + display: inline; + } + } + .v-off:before { + visibility: hidden; + } + + + tbody.v-drag-element { + display: block; + overflow: visible; + @include box-shadow(none); + background: transparent; + @include opacity(1); + + tr { + display: block; + @include valo-drag-element-style($background-color: null); + background: $background-color; + + &[style*="hidden"] { + + } + } + } + + + .#{$primary-stylename}-body { + // Show on top of scroll position indicator (allow scroll events to hit the body instead of indicator) + position: relative; + z-index: 1; + } + + .#{$primary-stylename}-scrollposition { + position: absolute; + top: 50%; + width: 100%; + height: $v-unit-size; + line-height: $v-unit-size; + margin: round($v-unit-size/-2) 0 0 !important; + text-align: center; + } + + + + + + // Drag'n'drop styles + + .#{$primary-stylename}-drag .#{$primary-stylename}-body { + @include box-shadow(0 0 0 2px rgba($v-focus-color, .5)); + + @if color-luminance($v-focus-color) + 50 < color-luminance($background-color) { + border-color: $v-focus-color; + } + + .v-ie8 & { + border-color: $v-focus-color; + } + + .#{$primary-stylename}-focus { + outline: none; + } + } + + .#{$primary-stylename}-row-drag-middle td:first-child:before { + content: ""; + display: block; + position: absolute; + height: $v-table-row-height + $v-table-border-width; + left: 0; + right: 0; + background: $v-focus-color; + @include opacity(.2); + } + + .#{$primary-stylename}-row-drag-top td:first-child:before, + .#{$primary-stylename}-row-drag-bottom td:first-child:after { + content: "\2022"; + display: block; + position: absolute; + height: 2px; + left: 0; + right: 0; + background: $v-focus-color; + font-size: $v-font-size * 2; + line-height: 2px; + color: $v-focus-color; + text-indent: round($v-font-size/-4); + text-shadow: 0 0 1px $background-color, 0 0 1px $background-color; + } + + .#{$primary-stylename}-row-drag-top td:first-child:before { + margin-top: -$v-table-border-width; + } + + .v-ff & .#{$primary-stylename}-row-drag-top td:first-child:before, + .v-ff & .#{$primary-stylename}-row-drag-bottom td:first-child:after { + line-height: 1px; + } + + .v-ie & .#{$primary-stylename}-row-drag-top td:first-child:before, + .v-ie & .#{$primary-stylename}-row-drag-bottom td:first-child:after { + line-height: 0; + } + +} + + + + +@mixin valo-table-sort-asc-icon-style { + content: '\f0dd'; + font-family: FontAwesome; +} + +@mixin valo-table-sort-desc-icon-style { + content: '\f0de'; + font-family: FontAwesome; +} + +@mixin valo-table-column-selector-icon-style { + font-family: FontAwesome; + content: "\f013"; +} + +@mixin valo-table-column-visible-icon-style { + content: "\f00c"; + font-family: FontAwesome; +} + + + + +@mixin valo-table-no-stripes-style ($primary-stylename: v-table) { + .#{$primary-stylename}-row, + .#{$primary-stylename}-row-odd { + background: transparent; + } +} + + +@mixin valo-table-no-vertical-lines-style ($primary-stylename: v-table) { + .#{$primary-stylename}-cell-content { + border-left: none; + padding-left: $v-table-border-width; + } + + &.v-treetable { + .#{$primary-stylename}-cell-content { + padding-left: $v-table-cell-padding-horizontal + $v-table-border-width; + } + } +} + + +@mixin valo-table-no-horizontal-lines-style ($primary-stylename: v-table) { + .#{$primary-stylename}-cell-content { + border-top: none; + border-bottom: none; + } +} + + +@mixin valo-table-no-header-style ($primary-stylename: v-table) { + .#{$primary-stylename}-header-wrap { + display: none; + } +} + + +@mixin valo-table-borderless-style ($primary-stylename: v-table) { + .#{$primary-stylename}-header-wrap, + .#{$primary-stylename}-footer-wrap, + .#{$primary-stylename}-header-drag, + .#{$primary-stylename}-body { + border: none; + } + + // TODO copy pasted from the main mixin + $background-color: $v-table-background-color or valo-table-background-color(); + $border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.7)); + + .#{$primary-stylename}-header-wrap { + border-bottom: $v-table-border-width solid $border-color; + } + + .#{$primary-stylename}-footer-wrap { + border-top: $v-table-border-width solid $border-color; + } +} + + +@mixin valo-table-spacing-style ( + $primary-stylename: v-table, + $row-height: $v-table-row-height, + $header-font-size: $v-table-header-font-size, + $cell-padding-horizontal: $v-table-cell-padding-horizontal + ) { + + $vertical-padding: round(($row-height - $header-font-size)/2); + + .#{$primary-stylename}-header-wrap, + .#{$primary-stylename}-footer-wrap, + .#{$primary-stylename}-header-drag { + font-size: $header-font-size; + } + + .#{$primary-stylename}-footer-container { + padding: $vertical-padding - $v-table-border-width $cell-padding-horizontal + $v-table-border-width $vertical-padding; + } + + .#{$primary-stylename}-caption-container, + .#{$primary-stylename}-header-drag { + padding-top: $vertical-padding; + padding-bottom: $vertical-padding - $v-table-border-width; + padding-left: $cell-padding-horizontal; + padding-right: $cell-padding-horizontal; + } + + .#{$primary-stylename}-caption-container-align-right { + padding-right: max(0, $cell-padding-horizontal - $v-table-resizer-width); + } + + .#{$primary-stylename}-resizer { + height: $row-height; + } + + .#{$primary-stylename}-cell-wrapper { + padding: $vertical-padding $cell-padding-horizontal; + } + + .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator, + .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator { + height: $row-height; + line-height: $row-height; + } + + .#{$primary-stylename}-header-drag { + margin-top: round($row-height/-2); + } + + .#{$primary-stylename}-row-drag-middle td:first-child:before { + height: $row-height + $v-table-border-width; + } + + &.v-treetable { + .#{$primary-stylename}-cell-wrapper { + padding-left: 0; + padding-right: 0; + } + + .#{$primary-stylename}-cell-content { + padding-left: $cell-padding-horizontal; + padding-right: $cell-padding-horizontal; + + &:first-child { + padding-left: $cell-padding-horizontal + $v-table-border-width; + } + } + + .#{$primary-stylename}-footer-container { + padding-left: $cell-padding-horizontal; + padding-right: $cell-padding-horizontal; + } + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss new file mode 100644 index 0000000000..2e28174fa7 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss @@ -0,0 +1,496 @@ +$v-tabsheet-content-animation-enabled: $v-animations-enabled !default; + + + + +@mixin valo-tabsheet-global ($primary-stylename: v-tabsheet) { + .#{$primary-stylename}-hidetabs > .#{$primary-stylename}-tabcontainer, + .#{$primary-stylename}-spacertd, + .v-disabled .#{$primary-stylename}-scroller, + .#{$primary-stylename} .v-disabled .#{$primary-stylename}-caption-close { + display: none; + } + + .#{$primary-stylename} { + overflow: visible !important; + position: relative; + } + + .#{$primary-stylename}-tabcontainer { + table, + tbody, + tr { + display: inline-block; + border-spacing: 0; + border-collapse: collapse; + vertical-align: top; + } + + td { + display: inline-block; + padding: 0; + } + } + + .#{$primary-stylename}-tabs { + white-space: nowrap; + @include box-sizing(border-box); + } + + .#{$primary-stylename}-content { + position: relative; + + > div > .v-scrollable { + @include valo-panel-adjust-content-margins; + } + } + +} + + + + + +@mixin valo-tabsheet ($primary-stylename: v-tabsheet) { + .#{$primary-stylename} { + &:not(.v-has-width) { + width: auto !important; + } + } + + .#{$primary-stylename}-spacertd { + display: none !important; + } + + .#{$primary-stylename}-tabcontainer { + @include valo-tabsheet-tabcontainer-style($primary-stylename); + } + + .#{$primary-stylename}-tabitemcell { + @include valo-tabsheet-tabitemcell-style($primary-stylename); + } + + .#{$primary-stylename}-scroller { + @include valo-tabsheet-scroller-style($primary-stylename); + } + + + @if $v-tabsheet-content-animation-enabled { + .#{$primary-stylename}-tabsheetpanel > .v-scrollable > .v-widget { + @include valo-anim-fade-in(300ms); + } + + $spinner-size: round($v-unit-size/2); + $spinner-size: $spinner-size + $spinner-size % 2; + + .#{$primary-stylename}-deco { + @include valo-spinner($size: $spinner-size); + height: 0 !important; + border-style: none; + display: block; + position: absolute; + z-index: -1; + bottom: 50%; + margin-bottom: round($v-unit-size/-2) - $spinner-size/2; + left: 50%; + margin-left: $spinner-size/-2; + opacity: 0; + + .v-ie8 & { + min-height: 0; + } + } + + .#{$primary-stylename}-loading .#{$primary-stylename}-deco { + @include transition(opacity 200ms 200ms); + opacity: 1; + z-index: 1; + height: $spinner-size !important; + border-style: solid; + + .v-ie8 &, + .v-ie9 & { + border-style: none; + } + + .v-ie8 & { + min-height: 30px; + } + } + } + +} + + +@mixin valo-tabsheet-tabcontainer-style ($primary-stylename: v-tabsheet) { + position: relative; + @include user-select(none); + @include box-sizing(border-box); + + &:before { + content: ""; + position: absolute; + height: 0; + // iOS panics with background color, creating black line artifacts + border-top: max(1px, first-number($v-border)) solid first-color(valo-border($strength: 0.5)); + bottom: 0; + left: 0; + right: 0; + } + + .#{$primary-stylename}-tabs { + position: relative; + } +} + + +@mixin valo-tabsheet-tabitemcell-style ($primary-stylename: v-tabsheet) { + vertical-align: bottom; + + .#{$primary-stylename}-tabitem { + line-height: 0; + overflow: hidden; + } + + .v-caption { + margin-left: round($v-unit-size/2); + padding: 0 round($v-unit-size/10); + @include box-sizing(border-box); + cursor: pointer; + text-align: center; + line-height: $v-unit-size; + font-size: round($v-font-size * 0.95); + font-weight: $v-font-weight; + color: valo-font-color($v-app-background-color, 0.58); + width: auto !important; + overflow: hidden; + text-overflow: ellipsis; + border-bottom: max(1px, first-number($v-border))*2 solid transparent; + + @if $v-animations-enabled { + @include transition(border-bottom 200ms, color 200ms); + } + + .v-captiontext { + display: inline; + } + + .v-icon + .v-captiontext { + margin-left: round($v-unit-size/4); + } + + &:hover { + color: $v-selection-color; + } + + &.v-disabled { + @include opacity($v-disabled-opacity); + cursor: default; + color: inherit !important; + border-bottom: none; + } + } + + &:first-child .v-caption, + &[aria-hidden="true"] + td .v-caption { + margin-left: 0; + } + + &:focus { + outline: none; + + .v-caption { + color: $v-selection-color; + } + } + + .#{$primary-stylename}-tabitem-selected .v-caption.v-caption { + border-bottom-color: $v-selection-color; + color: $v-selection-color; + } + + .#{$primary-stylename}-caption-close { + display: inline-block; + font-size: round($v-font-size * 1.1); + line-height: round($v-font-size * 1.1); + width: round($v-font-size * 1.1); + vertical-align: middle; + text-align: center; + margin: 0 round($v-font-size/-4) 0 round($v-font-size/2); + border-radius: round($v-border-radius/2); + color: valo-font-color($v-app-background-color, 0.4); + + &:hover { + background: rgba(#000, .03); + color: $v-selection-color; + } + + &:active { + background: $v-selection-color; + color: valo-font-color($v-selection-color); + } + } +} + + +@mixin valo-tabsheet-scroller-style ($primary-stylename: v-tabsheet) { + $border-color: first-color(valo-border($strength: 0.5)); + + position: absolute; + top: 0; + right: 0; + bottom: 0; + padding-left: round($v-unit-size/2); + @include linear-gradient(to left, $v-background-color 70%, rgba($v-background-color, 0) 100%, $fallback: transparent); + pointer-events: none; + + &:after { + content: ""; + height: first-number($v-border); + position: absolute; + bottom: 0; + left: 0; + right: 0; + display: block; + @include linear-gradient(to left, $border-color 70%, rgba($border-color, 0) 100%, $fallback: transparent); + } + + .v-ie8 &, + .v-ie9 & { + background-color: $v-background-color; + + &:after { + background-color: $border-color; + } + } + + button { + @include appearance(none); + border: none; + background: transparent; + font: inherit; + color: inherit; + height: 100%; + margin: 0; + padding: 0 round($v-unit-size/4); + outline: none; + cursor: pointer; + pointer-events: auto; + @include opacity(.5); + + &:hover { + @include opacity(1); + color: $v-selection-color; + } + + &:active { + @include opacity(.7); + color: $v-selection-color; + } + + &::-moz-focus-inner { + padding: 0; + border: 0 + } + } + + [class*="Next"] { + padding-left: round($v-unit-size/8); + &:before { + @include valo-tabsheet-scroller-next-icon-style; + } + } + + [class*="Prev"] { + padding-right: round($v-unit-size/8); + &:before { + @include valo-tabsheet-scroller-prev-icon-style; + } + } + + [class*="disabled"] { + cursor: default; + color: inherit !important; + @include opacity(.1, true); + } +} + + +@mixin valo-tabsheet-scroller-prev-icon-style { + font-family: FontAwesome; + content: "\f053"; +} + + +@mixin valo-tabsheet-scroller-next-icon-style { + font-family: FontAwesome; + content: "\f054"; +} + + + + + + + + +@mixin valo-tabsheet-framed-style ($primary-stylename: v-tabsheet, $frame-inactive-tabs: true, $outer-frame: true, $tab-spacing: round($v-unit-size/10)) { + > .#{$primary-stylename}-tabcontainer { + .v-caption { + position: relative; + margin-left: $tab-spacing or first-number($v-border) * -1; + padding: 0 $v-layout-spacing-horizontal; + border: first-number($v-border) solid transparent; + line-height: $v-unit-size - first-number($v-border); + border-radius: $v-border-radius $v-border-radius 0 0; + font-weight: $v-font-weight + 100; + + @if $v-animations-enabled { + @include transition(background-color 160ms); + } + + &:hover { + background-color: darken($v-app-background-color, 3%); + border-bottom-color: first-color(valo-border($strength: 0.5)); + } + } + + td:first-child .v-caption, + [aria-hidden="true"] + td .v-caption { + margin-left: 0; + } + + @if $frame-inactive-tabs { + .#{$primary-stylename}-tabitem .v-caption { + border-color: first-color(valo-border($strength: 0.5)); + } + } + + .#{$primary-stylename}-tabitem-selected .v-caption { + background: $v-panel-background-color; + border-color: first-color(valo-border($strength: 0.5)); + border-bottom: none; + padding-bottom: first-number($v-border); + } + + .v-caption-closable { + padding-right: $v-layout-spacing-horizontal + round($v-font-size * 1.1); + } + + .#{$primary-stylename}-caption-close { + position: absolute; + top: round($v-font-size/4); + right: round($v-font-size/4); + margin: 0; + } + } + + > .#{$primary-stylename}-content { + // iOS panics with black line artifacts, + // moving the background color to an inner element fixes it + > div { + background: $v-panel-background-color; + } + + @if $outer-frame { + border: valo-border($strength: 0.5); + border-top: none; + } + } + + &.padded-tabbar { + > .#{$primary-stylename}-tabcontainer { + @if $outer-frame { + border: valo-border($strength: 0.5); + border-bottom: none; + } + + background: $v-background-color; + padding-top: round($v-unit-size/6); + } + } + + &.icons-on-top .v-caption-closable { + padding-right: $v-layout-spacing-horizontal; + } +} + + + + + + + + + +@mixin valo-tabsheet-align-tabs-style ($primary-stylename: v-tabsheet, $align: center) { + > .#{$primary-stylename}-tabcontainer { + text-align: $align; + } +} + +@mixin valo-tabsheet-equal-width-tabs-style ($primary-stylename: v-tabsheet, $flex: false) { + > .#{$primary-stylename}-tabcontainer { + table, + tbody, + tr { + width: 100%; + } + + tr { + display: table; + @if $flex == false { + table-layout: fixed; + } + } + + td { + display: table-cell; + } + + .v-caption { + margin: 0; + display: block; + } + } +} + +@mixin valo-tabsheet-icons-on-top-style ($primary-stylename: v-tabsheet) { + > div > .#{$primary-stylename}-tabs { + .v-caption { + padding-top: round($v-unit-size/6); + padding-bottom: round($v-unit-size/6); + line-height: 1.2; + } + + .#{$primary-stylename}-tabitem-selected .v-caption { + padding-bottom: round($v-unit-size/6) + first-number($v-border); + } + + .v-icon { + display: block; + + + .v-captiontext.v-captiontext { + margin-left: 0; + } + } + } +} + + +@mixin valo-tabsheet-only-selected-closable-style ($primary-stylename: v-tabsheet) { + > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-caption-close { + visibility: hidden; + } + + > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-tabitem-selected .#{$primary-stylename}-caption-close { + visibility: visible; + } +} + + +@mixin valo-tabsheet-padded-tabbar-style ($primary-stylename: v-tabsheet) { + > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-tabs { + padding: 0 round($v-unit-size/4); + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss new file mode 100644 index 0000000000..3b610251d3 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss @@ -0,0 +1,60 @@ +@mixin valo-textarea ($primary-stylename: v-textarea) { + + .#{$primary-stylename} { + @include valo-textarea-style; + width: $v-default-field-width; + } + + .#{$primary-stylename}-readonly { + @include valo-textfield-readonly-style; + } + + .#{$primary-stylename}-error { + @include valo-textfield-error-style; + } + +} + + +@mixin valo-textarea-style ( + $unit-size : $v-unit-size, + $padding : round($v-unit-size/6), // Computed by default + + $font-color : null, // Computed by default + $font-weight : max(400, $v-font-weight), // Inherited by default + $font-size : null, // Inherited by default + + $background-color : $v-textfield-background-color, + $border : $v-textfield-border, + $border-radius : $v-textfield-border-radius, + + $bevel : $v-textfield-bevel, + $shadow : $v-textfield-shadow, + + $states : (normal, focus, disabled) + ) { + + @include valo-textfield-style($unit-size: $unit-size, $padding: $padding, + $font-color: $font-color, + $font-weight: $font-weight, // Inherited by default + $font-size: $font-size, // Inherited by default + + $background-color: $background-color, + $border: $border, + $border-radius: $border-radius, + + $bevel: $bevel, + $shadow: $shadow, + + $states: $states); + //display: block; // Fixes extra white-space under the textarea element + height: auto; + resize: none; + + .v-ie8 &, + .v-ie9 & { + line-height: inherit; + padding-top: round($unit-size/9); + padding-bottom: round($unit-size/9); + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss new file mode 100644 index 0000000000..c314a0c855 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -0,0 +1,246 @@ +$v-textfield-background-color: if(is-dark-color($v-app-background-color), darken($v-app-background-color, 4%), lighten($v-app-background-color, 8%)) !default; +$v-textfield-bevel: inset 0 1px 0 v-shade !default; +$v-textfield-shadow: 0 1px 0 (v-tint 2) !default; +$v-textfield-font-weight: 400 !default; +$v-textfield-border: $v-border !default; +$v-textfield-border-radius: $v-border-radius !default; +$v-textfield-disabled-opacity: $v-disabled-opacity !default; + + + + + + + + +@mixin valo-textfield-style ( + $unit-size : $v-unit-size, + $padding : null, // Computed by default + + $font-color : null, // Computed by default + $font-weight : max(400, $v-font-weight), + $font-size : null, // Inherited by default + + $background-color : $v-textfield-background-color, + $border : $v-textfield-border, + $border-radius : $v-textfield-border-radius, + + $gradient : none, + $bevel : $v-textfield-bevel, + $shadow : $v-textfield-shadow, + + $states : (normal, focus, disabled) + ) { + + @if contains($states, normal) { + @include appearance(none); + margin: 0; + font: inherit; + font-size: $font-size; + font-weight: $font-weight; + line-height: normal; + height: $unit-size; + border-radius: $border-radius; + + .v-ie8 &, + .v-ie9 & { + line-height: $unit-size; + padding-top: 0; + padding-bottom: 0; + } + + @if type-of($padding) == number or type-of($padding) == list { + padding: $padding; + } @else { + $padding-width: ceil($unit-size/6); + @if $border-radius { + $padding-width: $padding-width + ceil($border-radius/3); + } + $padding-height: round($unit-size/9); + padding: $padding-height $padding-width; + } + + @if $background-color and $border { + border: valo-border($border, darkest-color($background-color, $v-app-background-color)); + } + + @if $gradient == none { + background: $background-color; + } @else if $gradient { + @include valo-gradient($color: $background-color, $gradient: $gradient) + } + + @if $background-color { + color: valo-font-color($background-color); + } + + @include box-shadow(valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient)); + + @if $v-animations-enabled { + @include transition(box-shadow 180ms, border 180ms); + } + } + + @if contains($states, disabled) { + &.v-disabled { + @include opacity($v-textfield-disabled-opacity); + } + } + + @if contains($states, focus) { + &:focus { + @include valo-textfield-focus-style($bevel: $bevel, $shadow: $shadow, $gradient: $gradient, $background-color: $background-color); + } + } + + // TODO allow parent selector to be used in interpolation + &.v-textfield-prompt, + &.v-textarea-prompt { + @include valo-textfield-prompt-style($background-color); + } + +} + + +@mixin valo-textfield-prompt-style ($background-color: $v-textfield-background-color) { + @if type-of($background-color) == color { + $font-color: valo-font-color($background-color); + $font-color: mix($background-color, $font-color); + @if is-dark-color($background-color) and saturation($background-color) > 50% { + $font-color: scale-color($font-color, $lightness: 20%); + } + $font-color: scale-color($font-color, $saturation: saturation($font-color)); + color: $font-color; + } +} + + +@mixin valo-textfield-focus-style ($bevel: $v-textfield-bevel, $shadow: $v-textfield-shadow, $background-color: $v-textfield-background-color, $gradient: null) { + outline: none; + @if $v-animations-enabled { + @include transition(none); + } + + $focus-color: $v-focus-color; + + @if color-luminance($focus-color) + 50 < color-luminance($v-background-color) { + border-color: $focus-color; + } + + @include box-shadow(valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient, $include-focus: true)); + + @include valo-focus-style; +} + + +@mixin valo-textfield-readonly-style { + background: transparent; + @include box-shadow(none); + &:focus { + @include valo-focus-style($include-box-shadow: true); + } +} + + +@mixin valo-textfield ($primary-stylename: v-textfield) { + + .#{$primary-stylename} { + @include valo-textfield-style; + width: $v-default-field-width; + } + + .#{$primary-stylename}-readonly { + @include valo-textfield-readonly-style; + } + + .#{$primary-stylename}-error { + @include valo-textfield-error-style; + } + +} + + + +@mixin valo-textfield-borderless-style ($background-color: transparent) { + border: none; + border-radius: 0; + background: $background-color; + @include box-shadow(none); + @if $background-color == transparent { + color: inherit; + } @else if type-of($background-color) == color { + color: valo-font-color($background-color); + } + + &:focus { + @include box-shadow(none); + } +} + + + + +@mixin valo-textfield-error-style { + border-color: $v-error-indicator-color !important; + $bg: scale-color($v-error-indicator-color, $lightness: 98%); + background: $bg; + color: valo-font-color($bg); +} + + + + + + + +@mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylenames: inline-icon, $input-selector: null, $unit-size: $v-unit-size, $font-size: $v-font-size, $image-icon-size: 16px) { + $slot-selector: ""; + $caption-selector: ""; + $text-input-selector: ""; + + @each $style in $stylenames { + $slot-selector: $slot-selector + ".v-slot-" + $style; + $caption-selector: $caption-selector + ".v-caption-" + $style; + $text-input-selector: $text-input-selector + "." + $primary-stylename + "-" + $style; + } + + #{$slot-selector} { + position: relative; + } + + #{$caption-selector} { + padding: 0; + + .v-captiontext { + // Need to include to get the default padding back + @include valo-caption-style; + margin: 0; + } + + .v-icon { + position: absolute; + z-index: 10; + } + + // Font icons + span.v-icon { + $border-width: first-number($v-textfield-border); + left: $border-width; + bottom: $border-width; + width: $unit-size; + line-height: $unit-size - $border-width*2; + text-align: center; + font-size: $font-size; + } + + // Image icons + img.v-icon { + left: round(($unit-size - $image-icon-size)/2); + bottom: round(($unit-size - $image-icon-size)/2); + } + } + + #{$text-input-selector} #{$input-selector} { + padding-left: $unit-size; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss new file mode 100644 index 0000000000..9ac2f7e43d --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_tree.scss @@ -0,0 +1,264 @@ +$v-tree-row-height: round($v-unit-size/1.3) !default; +$v-tree-animations-enabled: true !default; +$v-tree-expand-animation-enabled: false !default; + + +@if $v-tree-expand-animation-enabled { + @include keyframes(valo-tree-node-open) { + 0% { + max-height: 0; + } + 100% { + max-height: $v-tree-row-height * 10; + } + } + + @include keyframes(valo-tree-node-close) { + 0% { + max-height: $v-tree-row-height * 10; + } + 100% { + max-height: 0; + } + } +} + + +@mixin valo-tree ($primary-stylename: v-tree) { + + .#{$primary-stylename} { + position: relative; + white-space: nowrap; + @include user-select(none); + + &:focus { + outline: none; + } + } + + .#{$primary-stylename}-node { + &:before { + content: ""; + position: absolute; + display: inline-block; + z-index: 3; + width: 1.9em; + height: $v-tree-row-height; + cursor: pointer; + // IE 9/10 need some color so that this element can receive mouse events. + // 'red' just happens to be the shortest color name. + background: red; + opacity: 0; + + .v-ie8 & { + content: "+"; + position: static; + margin-left: -1.9em; + vertical-align: top; + @include valo-tree-collapsed-icon-style; + text-align: center; + background: transparent; + } + } + + .v-ie8 & { + padding-left: 1.9em; + } + } + + .#{$primary-stylename}-node-caption { + height: $v-tree-row-height; + line-height: $v-tree-row-height - 1px; + overflow: hidden; + white-space: nowrap; + + & > div { + display: inline-block; + width: 100%; + position: relative; + z-index: 2; + + &:before { + @include valo-tree-collapsed-icon-style; + display: inline-block; + width: .5em; + text-align: center; + margin: 0 .6em 0 .8em; + + @if $v-tree-animations-enabled { + @include transition(all 100ms); + } + + .v-ie8 & { + display: none; + } + } + } + + span { + padding-right: $v-tree-row-height; + cursor: pointer; + display: inline-block; + // Allow to click on the whole row (almost, at least the right side part) + width: 100%; + + // IE does strange things when the width is wider than the parent + .v-ie & { + width: auto; + } + } + + .v-icon { + padding-right: 0; + width: auto; + min-width: 1em; + } + + &:after { + content: ""; + display: inline-block; + vertical-align: top; + position: absolute; + z-index: 1; + left: 0; + width: 100%; + height: $v-tree-row-height; + border-radius: $v-border-radius; + opacity: 0; + + @if $v-tree-animations-enabled { + @include transition(opacity 120ms); + } + + .v-ie8 & { + content: none; + } + } + + .v-ie8 & { + display: inline-block; + } + } + + .#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-caption > div:before { + @include valo-tree-expanded-icon-style; + + @if $v-tree-animations-enabled { + @include transform(rotate(90deg)); + @include valo-tree-collapsed-icon-style; + } + } + + .v-ie8 & .#{$primary-stylename}-node-expanded:before { + @include valo-tree-expanded-icon-style(true); + } + + .#{$primary-stylename}-node-leaf > .#{$primary-stylename}-node-caption > div:before, + .v-ie8 & .#{$primary-stylename}-node-leaf:before { + visibility: hidden; + } + + .#{$primary-stylename}-node-focused { + // This a v-tree-node-caption element + &:after { + opacity: 1; + border: 1px solid $v-focus-color; + } + + .v-ie8 & { + outline: 1px dotted $v-focus-color; + } + } + + + + .#{$primary-stylename}-node-selected { + color: valo-font-color($v-selection-color, 0.9); + text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth); + + &:after { + opacity: 1; + @include valo-gradient($v-selection-color); + border: none; + + .v-ie8 & { + //visibility: visible; + } + } + + .v-ie8 & { + @include valo-gradient($v-selection-color); + } + } + + .#{$primary-stylename}-node-children { + padding-left: round($v-unit-size/2); + + .v-ie8 & { + padding-left: 0; + } + } + + @if $v-tree-expand-animation-enabled { + .#{$primary-stylename}-node-children[style*="display: none"] { + @include animation(valo-tree-node-close 400ms ease-out forwards); + display: block !important; + } + + .#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-children { + @include animation(valo-tree-node-open 400ms ease-in); + } + } + + + + // Drag'n'drop styles + + .#{$primary-stylename}-node-drag-top:before, + .#{$primary-stylename}-node-drag-bottom:after { + content: "\2022"; + display: block; + position: absolute; + height: 2px; + width: 100%; + background: $v-focus-color; + font-size: $v-font-size * 2; + line-height: 2px; + color: $v-focus-color; + text-indent: round($v-font-size/-4); + text-shadow: 0 0 1px $v-background-color, 0 0 1px $v-background-color; + } + + .#{$primary-stylename}-node-caption-drag-center { + @include box-shadow(0 0 0 2px $v-focus-color); + position: relative; + border-radius: $v-border-radius; + + .v-ie8 & { + outline: 2px solid $v-focus-color; + } + } + + .v-ff & .#{$primary-stylename}-node-drag-top:before, + .v-ff & .#{$primary-stylename}-node-drag-bottom:after { + line-height: 1px; + } + + .v-ie8 & .#{$primary-stylename}-node-drag-top:before, + .v-ie8 & .#{$primary-stylename}-node-drag-bottom:after { + line-height: 0; + } +} + + +@mixin valo-tree-collapsed-icon-style { + content: "\f0da"; + font-family: FontAwesome; +} + +@mixin valo-tree-expanded-icon-style ($force: false) { + @if $v-tree-animations-enabled == false or $force { + content: "\f0d7"; + font-family: FontAwesome; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_treetable.scss b/WebContent/VAADIN/themes/valo/components/_treetable.scss new file mode 100644 index 0000000000..0423b37ab1 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_treetable.scss @@ -0,0 +1,48 @@ +@mixin valo-treetable ($primary-stylename: v-treetable) { + .#{$primary-stylename} { + [class*="caption-container"], + [class*="footer-container"], + [class*="cell-wrapper"] { + @include box-sizing(content-box); + padding-left: 0; + padding-right: 0; + } + + [class*="caption-container"] { + padding-left: $v-table-cell-padding-horizontal; + } + + [class*="caption-container-align-right"] { + padding-left: $v-table-cell-padding-horizontal + $v-table-resizer-width; + } + + [class*="footer-container"] { + padding-right: $v-table-cell-padding-horizontal; + } + + [class*="cell-content"] { + padding-left: $v-table-cell-padding-horizontal; + padding-right: $v-table-cell-padding-horizontal; + + &:first-child { + padding-left: $v-table-cell-padding-horizontal + $v-table-border-width; + } + } + } + + .#{$primary-stylename}-treespacer { + display: inline-block; + position: absolute; + width: round($v-unit-size/2); + margin-left: round($v-unit-size/-2) - round($v-table-cell-padding-horizontal/2); + text-align: center; + } + + .#{$primary-stylename}-node-closed:before { + @include valo-tree-collapsed-icon-style; + } + + .#{$primary-stylename}-node-open:before { + @include valo-tree-expanded-icon-style($force: true); + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_twincolselect.scss b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss new file mode 100644 index 0000000000..9d434a88fb --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss @@ -0,0 +1,86 @@ +@mixin valo-twincolselect ($primary-stylename: v-select-twincol) { + + .#{$primary-stylename} { + white-space: normal; + + select { + @include valo-nativeselect-select-style; + } + + .v-textfield, + .v-nativebutton { + width: auto !important; + margin-top: round($v-unit-size/4); + } + + .v-nativebutton { + margin-left: round($v-unit-size/4); + } + } + + .#{$primary-stylename}-caption-left, + .#{$primary-stylename}-caption-right { + @include valo-caption-style; + } + + .#{$primary-stylename}-buttons { + white-space: nowrap; + display: inline-block; + vertical-align: top; + position: relative; + min-width: 3.5em; + + .v-button { + @include valo-widget-style; + position: absolute; + left: round($v-unit-size/4); + right: round($v-unit-size/4); + top: $v-unit-size - first-number($v-border); + padding: 0; + text-align: center; + + &:first-child { + top: 0; + } + } + + .v-button-caption { + display: none; + } + + .v-button:focus { + z-index: 1; + } + + @if $v-border-radius > 0 { + .v-button:first-child { + border-radius: $v-border-radius $v-border-radius 0 0; + } + + .v-button:last-child { + border-radius: 0 0 $v-border-radius $v-border-radius; + } + } + + .v-button-wrap:before { + @include valo-twincolselect-remove-icon-style; + } + + .v-button:first-child .v-button-wrap:before { + @include valo-twincolselect-add-icon-style; + } + } + +} + + + +@mixin valo-twincolselect-add-icon-style { + font-family: FontAwesome; + content: "\f054"; +} + +@mixin valo-twincolselect-remove-icon-style { + font-family: FontAwesome; + content: "\f053"; +} diff --git a/WebContent/VAADIN/themes/valo/components/_upload.scss b/WebContent/VAADIN/themes/valo/components/_upload.scss new file mode 100644 index 0000000000..103c21b6fe --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_upload.scss @@ -0,0 +1,5 @@ +@mixin valo-upload ($primary-stylename: v-upload) { + .#{$primary-stylename} .v-button { + @include valo-widget-style; + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_widget.scss b/WebContent/VAADIN/themes/valo/components/_widget.scss new file mode 100644 index 0000000000..f6c0b6462a --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_widget.scss @@ -0,0 +1,20 @@ +// +// @mixin valo-widget-style +@mixin valo-widget-style { + // Baseline expectations for all Vaadin widgets + @include box-sizing(border-box); + display: inline-block; + vertical-align: top; + + // Reset, since ordered layout uses text-align for horizotal alignment inside slots and + // white-space: nowrap; for horizontal layout orientation + text-align: left; + white-space: normal; +} + + +@mixin valo-widget { + .v-widget { + @include valo-widget-style; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss new file mode 100644 index 0000000000..d866ce2584 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_window.scss @@ -0,0 +1,366 @@ +$v-window-background-color: $v-panel-background-color !default; +$v-window-border-radius: $v-border-radius !default; +$v-window-shadow: 0 2px 10px (v-shade 2), 0 16px 80px -6px (v-shade 3), last($v-overlay-shadow) !default; +$v-window-animate-in: valo-placeholder-animate-in 140ms, valo-anim-fade-in 140ms !default; +$v-window-animate-out: valo-placeholder-animate-out 100ms, valo-anim-scale-down-fade-out 100ms !default; +$v-window-modality-curtain-background-color: #222 !default; + + +@if $v-animations-enabled { + @include keyframes(valo-modal-window-indication) { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + + @include keyframes(valo-anim-scale-down-fade-out) { + 100% { + @include transform(scale(0.8)); + opacity: 0; + } + } +} + + +@mixin valo-window ($primary-stylename: v-window) { + + .#{$primary-stylename} { + @include valo-overlay-style($background-color: $v-window-background-color, $animate-in: $v-window-animate-in, $animate-out: $v-window-animate-out); + + @if $v-window-shadow { + @if $v-window-shadow == none { + @include box-shadow(none); + } @else if $v-window-shadow != $v-overlay-shadow { + @include box-shadow(valo-bevel-and-shadow($shadow: $v-window-shadow)); + } + } + @if $v-window-border-radius != $v-border-radius { + border-radius: $v-window-border-radius; + } + padding: 0; + min-width: 4*$v-unit-size !important; + min-height: $v-unit-size !important; + white-space: nowrap; + overflow: hidden !important; + + @if $v-animations-enabled { + @include transition(width 200ms, height 200ms, top 200ms, left 200ms); + + &.#{$primary-stylename}-animate-in { + @include transition(none); + } + } + } + + .#{$primary-stylename}-modalitycurtain { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + @include radial-gradient(circle at 50% 50%, $v-window-modality-curtain-background-color, darken($v-window-modality-curtain-background-color, valo-gradient-opacity()), $fallback: $v-window-modality-curtain-background-color); + @include opacity(max(0.2, 0.8 - valo-gradient-opacity()/100%)); + @include valo-anim-fade-in($duration: 400ms, $delay: 100ms); + + .v-op12 & { + // Opera 12 has a shitbreak with the fade-in (flickers) + @include animation(none); + } + } + + .#{$primary-stylename}-draggingCurtain { + position: fixed !important; + } + + .#{$primary-stylename}-resizingCurtain + .v-window, + .#{$primary-stylename}-draggingCurtain + .v-window { + @include transition(none); + } + + $scroll-divider-width: max(1px, first-number($v-border)); + + .#{$primary-stylename}-outerheader { + position: absolute; + z-index: 2; + top: 0; + left: 0; + right: 0; + // Raise above the window content, if that is ever promoted to a layer + @include transform(translatez(0)); + + &:after { + content: ""; + position: absolute; + bottom: -$scroll-divider-width; + right: 0; + left: 0; + height: 0; + $_bg: $v-window-background-color; + border-top: $scroll-divider-width solid first-color(valo-border($strength: 0.5)); + } + } + + .#{$primary-stylename}-header { + @include user-select(none); + cursor: move; + line-height: $v-unit-size - 1px; + padding-left: round($v-unit-size/3); + margin-right: $v-unit-size * 2; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: blend-normal(rgba(valo-font-color($v-window-background-color), .7), $v-window-background-color); + } + + .#{$primary-stylename}-closebox, + .#{$primary-stylename}-maximizebox, + .#{$primary-stylename}-restorebox { + position: absolute; + z-index: 3; + top: 0; + right: 0; + @include box-sizing(border-box); + width: $v-unit-size - round($v-unit-size/9); + height: $v-unit-size - 1px; + background-color: $v-window-background-color; + line-height: $v-unit-size - 3px; + text-align: center; + cursor: pointer; + font-family: FontAwesome; + font-size: round($v-font-size * 1.3); + color: valo-font-color($v-window-background-color, .4); + + @if $v-animations-enabled { + @include transition(color 140ms); + } + + &:focus { + outline: none; + } + + &:hover { + @include opacity(1); + color: $v-selection-color; + } + + &:active { + color: inherit; + } + } + + .#{$primary-stylename}-closebox { + padding-right: round($v-unit-size/9); + @include valo-window-close-icon-style; + + @if $v-window-border-radius > 0 { + border-radius: 0 $v-window-border-radius 0 $v-window-border-radius; + } + } + + .#{$primary-stylename}-maximizebox, + .#{$primary-stylename}-restorebox { + right: $v-unit-size - round($v-unit-size/9); + padding-left: round($v-unit-size/9); + + @if $v-window-border-radius > 0 { + border-radius: 0 0 0 $v-window-border-radius; + + + .#{$primary-stylename}-closebox { + border-bottom-left-radius: 0; + } + } + } + + .#{$primary-stylename}-restorebox-disabled, + .#{$primary-stylename}-maximizebox-disabled { + display: none; + + + .#{$primary-stylename}-closebox { + width: $v-unit-size; + padding-right: 0; + border-bottom-left-radius: $v-window-border-radius; + } + } + + .#{$primary-stylename}-maximizebox { + @include valo-window-maximize-icon-style; + } + + .#{$primary-stylename}-restorebox { + @include valo-window-restore-icon-style; + } + + .v-window > .popupContent, + .#{$primary-stylename}-wrap, + .#{$primary-stylename}-contents, + .#{$primary-stylename}-contents > .v-scrollable { + height: 100%; + } + + .#{$primary-stylename}-contents { + @include box-sizing(border-box); + border-radius: $v-border-radius; + margin-top: 0 !important; + + > .v-scrollable { + @include valo-panel-adjust-content-margins; + + > .v-formlayout { + @include valo-formlayout-margins($all: round($v-unit-size/3)); + } + + position: relative; + + &:focus { + outline: none; + } + + &:before { + content: ""; + position: absolute; + z-index: 2; + top: 0; + height: 0; + border-top: $scroll-divider-width solid $v-window-background-color; + left: 0; + right: 0; + } + + .v-panel-captionwrap:after { + border-color: first-color(valo-border($strength: 0.5)); + } + + .v-panel-content:before { + border-color: $v-window-background-color; + } + } + } + + .#{$primary-stylename}-footer { + height: 0; + } + + .#{$primary-stylename}-resizebox { + position: absolute; + z-index: 1000; + right: 0; + bottom: 0; + width: round($v-unit-size/2); + height: round($v-unit-size/2); + cursor: nwse-resize; + + .v-ie8 & { + background: #000; + filter: alpha(opacity=0.1); + } + + .v-ie8 &, + .v-ie9 & { + cursor: se-resize; + } + } + + .#{$primary-stylename}-resizebox-disabled { + display: none; + } + + + // Flash modal window when clicking on the curtain + .#{$primary-stylename}-modalitycurtain:active { + ~ .v-window { + @include animation(none); + } + } + + + .#{$primary-stylename}-top-toolbar, + .#{$primary-stylename}-bottom-toolbar { + > .v-widget { + vertical-align: top; + } + + .v-label { + line-height: $v-unit-size - 1px; + } + + .v-spacing { + width: round($v-layout-spacing-horizontal/2); + } + } + + .#{$primary-stylename}-top-toolbar { + &.v-layout { + padding: round($v-unit-size/5) round($v-unit-size/3); + position: relative; + z-index: 2; + border-top: valo-border($strength: 0.5); + border-bottom: valo-border($strength: 0.5); + background-color: $v-background-color; + } + + &.v-menubar { + margin: round($v-unit-size/3) round($v-unit-size/3) round($v-unit-size/6); + } + + &.v-menubar-borderless { + padding-left: round($v-unit-size/6); + padding-right: round($v-unit-size/6); + margin: round($v-unit-size/6) - first-number($v-border) 0; + } + } + + .#{$primary-stylename}-bottom-toolbar.v-layout { + padding: round($v-unit-size/5) round($v-unit-size/3); + @include linear-gradient(to bottom, darken($v-background-color, valo-gradient-opacity($v-gradient)/2) 0, $v-background-color round($v-unit-size/10), $fallback: $v-background-color); + border-top: valo-border($strength: 0.5); + border-radius: 0 0 $v-border-radius $v-border-radius; + } + + .v-margin-left.v-margin-right.v-margin-top { + .#{$primary-stylename}-top-toolbar { + &.v-layout { + @include box-sizing(content-box); + margin: round($v-unit-size/-3) round($v-unit-size/-3) 0; + } + + &.v-menubar { + margin: 0; + } + + &.v-menubar-borderless { + margin: round($v-unit-size/6) - round($v-unit-size/3) round($v-unit-size/6) - round($v-unit-size/3) 0; + padding: 0; + } + } + } + + .v-margin-left.v-margin-right.v-margin-bottom { + .#{$primary-stylename}-bottom-toolbar { + &.v-layout { + @include box-sizing(content-box); + margin: 0 round($v-unit-size/-3) round($v-unit-size/-3); + } + } + } + +} + + +@mixin valo-window-close-icon-style { + &:before { + // times cross + content: "\00d7"; + } +} + +@mixin valo-window-maximize-icon-style { + &:before { + content: "+"; + } +} + +@mixin valo-window-restore-icon-style { + &:before { + // en-dash + content: "\2013"; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/img/colorpicker/gradient.png b/WebContent/VAADIN/themes/valo/components/img/colorpicker/gradient.png Binary files differnew file mode 100644 index 0000000000..def063a8ab --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/img/colorpicker/gradient.png diff --git a/WebContent/VAADIN/themes/valo/components/img/colorpicker/gradient2.png b/WebContent/VAADIN/themes/valo/components/img/colorpicker/gradient2.png Binary files differnew file mode 100644 index 0000000000..f51ed752a7 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/img/colorpicker/gradient2.png diff --git a/WebContent/VAADIN/themes/valo/components/img/colorpicker/slider_hue_bg.png b/WebContent/VAADIN/themes/valo/components/img/colorpicker/slider_hue_bg.png Binary files differnew file mode 100644 index 0000000000..bcef2c5575 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/img/colorpicker/slider_hue_bg.png diff --git a/WebContent/VAADIN/themes/valo/fonts/_fonts.scss b/WebContent/VAADIN/themes/valo/fonts/_fonts.scss new file mode 100644 index 0000000000..b33e14d5d2 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/_fonts.scss @@ -0,0 +1,46 @@ +// Not included automatically, only if $v-font-family specifies them +@import "open-sans/open-sans"; +@import "source-sans-pro/source-sans-pro"; +@import "roboto/roboto"; +@import "lato/lato"; +@import "lora/lora"; + + +$fontawesome-pathPrefix: null; + +@if $v-relative-paths == true { + $fontawesome-pathPrefix: "../../../"; +} + +@mixin valo-fonts { + // Font Awesome icons from the Base theme + @include v-font(FontAwesome, "#{$fontawesome-pathPrefix}../base/fonts/fontawesome-webfont"); +} + + +@mixin v-font($font-family, $file-name) { + @include font-face($font-family, $file-name); + + .#{$font-family} { + font-family: #{$font-family}; + font-style: normal; + font-weight: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + display: inline-block; + text-align: center; + @include user-select(none); + } +} + + +@mixin font($font-family, $file-name) { + @warn "The 'font' mixin is DEPRECATED. You should use the corresponding 'v-font' mixin instead."; + @include v-font($font-family, $file-name); +} + + + +// Include directly to avoid trapping inside a parent selector +// TODO move inside the theme main mixin once we can use Sass 3.3 (@at-root) +@include valo-fonts; diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/_lato.scss b/WebContent/VAADIN/themes/valo/fonts/lato/_lato.scss new file mode 100644 index 0000000000..152082689c --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/_lato.scss @@ -0,0 +1,155 @@ +$lato-pathPrefix: null; + +@if $v-relative-paths == false { + $lato-pathPrefix: "../valo/fonts/lato/"; +} + +@mixin font-lato-regular ($italic: true) { + @font-face { + font-family: 'Lato'; + src: url('#{$lato-pathPrefix}lato-regular-webfont.eot'); + src: url('#{$lato-pathPrefix}lato-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lato-pathPrefix}lato-regular-webfont.woff') format('woff'), + url('#{$lato-pathPrefix}lato-regular-webfont.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Lato'; + src: url('#{$lato-pathPrefix}lato-italic-webfont.eot'); + src: url('#{$lato-pathPrefix}lato-italic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lato-pathPrefix}lato-italic-webfont.woff') format('woff'), + url('#{$lato-pathPrefix}lato-italic-webfont.ttf') format('truetype'); + font-weight: 400; + font-style: italic; + } + } +} + + + + + +@mixin font-lato-hairline ($italic: true) { + @font-face { + font-family: 'Lato'; + src: url('#{$lato-pathPrefix}lato-hairline-webfont.eot'); + src: url('#{$lato-pathPrefix}lato-hairline-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lato-pathPrefix}lato-hairline-webfont.woff') format('woff'), + url('#{$lato-pathPrefix}lato-hairline-webfont.ttf') format('truetype'); + font-weight: 600; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Lato'; + src: url('#{$lato-pathPrefix}lato-hairlineitalic-webfont.eot'); + src: url('#{$lato-pathPrefix}lato-hairlineitalic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lato-pathPrefix}lato-hairlineitalic-webfont.woff') format('woff'), + url('#{$lato-pathPrefix}lato-hairlineitalic-webfont.ttf') format('truetype'); + font-weight: 600; + font-style: italic; + } + } +} + + + + +@mixin font-lato-light ($italic: true) { + @font-face { + font-family: 'Lato'; + src: url('#{$lato-pathPrefix}lato-light-webfont.eot'); + src: url('#{$lato-pathPrefix}lato-light-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lato-pathPrefix}lato-light-webfont.woff') format('woff'), + url('#{$lato-pathPrefix}lato-light-webfont.ttf') format('truetype'); + font-weight: 300; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Lato'; + src: url('#{$lato-pathPrefix}lato-lightitalic-webfont.eot'); + src: url('#{$lato-pathPrefix}lato-lightitalic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lato-pathPrefix}lato-lightitalic-webfont.woff') format('woff'), + url('#{$lato-pathPrefix}lato-lightitalic-webfont.ttf') format('truetype'); + font-weight: 300; + font-style: italic; + } + } +} + + + +@mixin font-lato-bold ($italic: true) { + @font-face { + font-family: 'Lato'; + src: url('#{$lato-pathPrefix}lato-bold-webfont.eot'); + src: url('#{$lato-pathPrefix}lato-bold-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lato-pathPrefix}lato-bold-webfont.woff') format('woff'), + url('#{$lato-pathPrefix}lato-bold-webfont.ttf') format('truetype'); + font-weight: 700; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Lato'; + src: url('#{$lato-pathPrefix}lato-bolditalic-webfont.eot'); + src: url('#{$lato-pathPrefix}lato-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lato-pathPrefix}lato-bolditalic-webfont.woff') format('woff'), + url('#{$lato-pathPrefix}lato-bolditalic-webfont.ttf') format('truetype'); + font-weight: 700; + font-style: italic; + } + } +} + + + + + +@mixin font-lato-black ($italic) { + @font-face { + font-family: 'Lato'; + src: url('#{$lato-pathPrefix}lato-black-webfont.eot'); + src: url('#{$lato-pathPrefix}lato-black-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lato-pathPrefix}lato-black-webfont.woff') format('woff'), + url('#{$lato-pathPrefix}lato-black-webfont.ttf') format('truetype'); + font-weight: 900; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Lato'; + src: url('#{$lato-pathPrefix}lato-blackitalic-webfont.eot'); + src: url('#{$lato-pathPrefix}lato-blackitalic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lato-pathPrefix}lato-blackitalic-webfont.woff') format('woff'), + url('#{$lato-pathPrefix}lato-blackitalic-webfont.ttf') format('truetype'); + font-weight: 900; + font-style: italic; + } + } +} + + + + + +@mixin font-lato ($italic: false, $extralight: false, $light: false, $regular: true, $medium: false, $bold: false, $black: false) { + @if $extralight { + @include font-lato-hairline($italic); + } + @if $light { + @include font-lato-light($italic); + } + @if $regular { + @include font-lato-regular($italic); + } + @if $bold { + @include font-lato-bold($italic); + } + @if $black { + @include font-lato-black($italic); + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-black-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/lato/lato-black-webfont.eot Binary files differnew file mode 100755 index 0000000000..254f92b5b6 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-black-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-black-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/lato/lato-black-webfont.ttf Binary files differnew file mode 100755 index 0000000000..1ecfb60748 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-black-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-black-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/lato/lato-black-webfont.woff Binary files differnew file mode 100755 index 0000000000..2269286e11 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-black-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-blackitalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/lato/lato-blackitalic-webfont.eot Binary files differnew file mode 100755 index 0000000000..5e6889cc4f --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-blackitalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-blackitalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/lato/lato-blackitalic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..bd334e9bea --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-blackitalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-blackitalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/lato/lato-blackitalic-webfont.woff Binary files differnew file mode 100755 index 0000000000..6e41ed94fc --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-blackitalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-bold-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/lato/lato-bold-webfont.eot Binary files differnew file mode 100755 index 0000000000..00954909c8 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-bold-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-bold-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/lato/lato-bold-webfont.ttf Binary files differnew file mode 100755 index 0000000000..695afc99a0 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-bold-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-bold-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/lato/lato-bold-webfont.woff Binary files differnew file mode 100755 index 0000000000..6c2eb81d98 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-bold-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-bolditalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/lato/lato-bolditalic-webfont.eot Binary files differnew file mode 100755 index 0000000000..0994180ad6 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-bolditalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-bolditalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/lato/lato-bolditalic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..321368dac1 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-bolditalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-bolditalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/lato/lato-bolditalic-webfont.woff Binary files differnew file mode 100755 index 0000000000..8782b4792b --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-bolditalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairline-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairline-webfont.eot Binary files differnew file mode 100755 index 0000000000..dc400174fc --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairline-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairline-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairline-webfont.ttf Binary files differnew file mode 100755 index 0000000000..9041e647f3 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairline-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairline-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairline-webfont.woff Binary files differnew file mode 100755 index 0000000000..19acf444be --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairline-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairlineitalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairlineitalic-webfont.eot Binary files differnew file mode 100755 index 0000000000..0ba065fe8f --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairlineitalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairlineitalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairlineitalic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..05aa693e4d --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairlineitalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairlineitalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairlineitalic-webfont.woff Binary files differnew file mode 100755 index 0000000000..d63f45aa24 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-hairlineitalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-italic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/lato/lato-italic-webfont.eot Binary files differnew file mode 100755 index 0000000000..b0e5bb354f --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-italic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-italic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/lato/lato-italic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..368cf111e6 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-italic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-italic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/lato/lato-italic-webfont.woff Binary files differnew file mode 100755 index 0000000000..9d0784d5e4 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-italic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-light-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/lato/lato-light-webfont.eot Binary files differnew file mode 100755 index 0000000000..2233ada12e --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-light-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-light-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/lato/lato-light-webfont.ttf Binary files differnew file mode 100755 index 0000000000..b9ad943886 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-light-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-light-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/lato/lato-light-webfont.woff Binary files differnew file mode 100755 index 0000000000..c0270e2863 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-light-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-lightitalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/lato/lato-lightitalic-webfont.eot Binary files differnew file mode 100755 index 0000000000..54635135a9 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-lightitalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-lightitalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/lato/lato-lightitalic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..da3ad35f8b --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-lightitalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-lightitalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/lato/lato-lightitalic-webfont.woff Binary files differnew file mode 100755 index 0000000000..80f3d711a0 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-lightitalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-regular-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/lato/lato-regular-webfont.eot Binary files differnew file mode 100755 index 0000000000..db0507682a --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-regular-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-regular-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/lato/lato-regular-webfont.ttf Binary files differnew file mode 100755 index 0000000000..33743b52d9 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-regular-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/lato/lato-regular-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/lato/lato-regular-webfont.woff Binary files differnew file mode 100755 index 0000000000..c287ffcdf3 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lato/lato-regular-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/lora/_lora.scss b/WebContent/VAADIN/themes/valo/fonts/lora/_lora.scss new file mode 100644 index 0000000000..a40f800b5a --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lora/_lora.scss @@ -0,0 +1,71 @@ +$lora-pathPrefix: null; + +@if $v-relative-paths == false { + $lora-pathPrefix: "../valo/fonts/lora/"; +} + +@mixin font-lora-regular ($italic: true) { + @font-face { + font-family: 'lora'; + src: url('#{$lora-pathPrefix}lora-regular-webfont.eot'); + src: url('#{$lora-pathPrefix}lora-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lora-pathPrefix}lora-regular-webfont.woff') format('woff'), + url('#{$lora-pathPrefix}lora-regular-webfont.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'lora'; + src: url('#{$lora-pathPrefix}lora-italic-webfont.eot'); + src: url('#{$lora-pathPrefix}lora-italic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lora-pathPrefix}lora-italic-webfont.woff') format('woff'), + url('#{$lora-pathPrefix}lora-italic-webfont.ttf') format('truetype'); + font-weight: 400; + font-style: italic; + } + } +} + + + + + + + +@mixin font-lora-bold ($italic: true) { + @font-face { + font-family: 'lora'; + src: url('#{$lora-pathPrefix}lora-bold-webfont.eot'); + src: url('#{$lora-pathPrefix}lora-bold-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lora-pathPrefix}lora-bold-webfont.woff') format('woff'), + url('#{$lora-pathPrefix}lora-bold-webfont.ttf') format('truetype'); + font-weight: 700; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'lora'; + src: url('#{$lora-pathPrefix}lora-bolditalic-webfont.eot'); + src: url('#{$lora-pathPrefix}lora-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$lora-pathPrefix}lora-bolditalic-webfont.woff') format('woff'), + url('#{$lora-pathPrefix}lora-bolditalic-webfont.ttf') format('truetype'); + font-weight: 700; + font-style: italic; + } + } +} + + + + + + +@mixin font-lora ($italic: false, $extralight: false, $light: false, $regular: true, $medium: false, $bold: false, $black: false) { + @if $regular { + @include font-lora-regular($italic); + } + @if $bold { + @include font-lora-bold($italic); + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/fonts/lora/lora-bold-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/lora/lora-bold-webfont.eot Binary files differnew file mode 100755 index 0000000000..bfd15013c4 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lora/lora-bold-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/lora/lora-bold-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/lora/lora-bold-webfont.ttf Binary files differnew file mode 100755 index 0000000000..1785809e73 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lora/lora-bold-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/lora/lora-bold-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/lora/lora-bold-webfont.woff Binary files differnew file mode 100755 index 0000000000..d09efc35bb --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lora/lora-bold-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/lora/lora-bolditalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/lora/lora-bolditalic-webfont.eot Binary files differnew file mode 100755 index 0000000000..507a689c63 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lora/lora-bolditalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/lora/lora-bolditalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/lora/lora-bolditalic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..19e1459eb0 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lora/lora-bolditalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/lora/lora-bolditalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/lora/lora-bolditalic-webfont.woff Binary files differnew file mode 100755 index 0000000000..848e03d916 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lora/lora-bolditalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/lora/lora-italic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/lora/lora-italic-webfont.eot Binary files differnew file mode 100755 index 0000000000..f966a9fcf9 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lora/lora-italic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/lora/lora-italic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/lora/lora-italic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..aa0bd01b58 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lora/lora-italic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/lora/lora-italic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/lora/lora-italic-webfont.woff Binary files differnew file mode 100755 index 0000000000..2cfc2df1d7 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lora/lora-italic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/lora/lora-regular-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/lora/lora-regular-webfont.eot Binary files differnew file mode 100755 index 0000000000..8c218880c8 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lora/lora-regular-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/lora/lora-regular-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/lora/lora-regular-webfont.ttf Binary files differnew file mode 100755 index 0000000000..908f2e34f4 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lora/lora-regular-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/lora/lora-regular-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/lora/lora-regular-webfont.woff Binary files differnew file mode 100755 index 0000000000..2b15bf776e --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/lora/lora-regular-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Bold-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Bold-webfont.eot Binary files differnew file mode 100644 index 0000000000..5d20d91633 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Bold-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Bold-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Bold-webfont.ttf Binary files differnew file mode 100644 index 0000000000..2109c958e3 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Bold-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Bold-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Bold-webfont.woff Binary files differnew file mode 100644 index 0000000000..1205787b0e --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Bold-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-BoldItalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-BoldItalic-webfont.eot Binary files differnew file mode 100644 index 0000000000..1f639a15ff --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-BoldItalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-BoldItalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-BoldItalic-webfont.ttf Binary files differnew file mode 100644 index 0000000000..242d6b25c3 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-BoldItalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-BoldItalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-BoldItalic-webfont.woff Binary files differnew file mode 100644 index 0000000000..ed760c0628 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-BoldItalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBold-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBold-webfont.eot Binary files differnew file mode 100644 index 0000000000..1e29ad5954 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBold-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBold-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBold-webfont.ttf Binary files differnew file mode 100644 index 0000000000..6b9118ee35 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBold-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBold-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBold-webfont.woff Binary files differnew file mode 100644 index 0000000000..a7b99d2552 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBold-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBoldItalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBoldItalic-webfont.eot Binary files differnew file mode 100644 index 0000000000..77184af422 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBoldItalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBoldItalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBoldItalic-webfont.ttf Binary files differnew file mode 100644 index 0000000000..26a07e9392 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBoldItalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBoldItalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBoldItalic-webfont.woff Binary files differnew file mode 100644 index 0000000000..45395d1bbe --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-ExtraBoldItalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Italic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Italic-webfont.eot Binary files differnew file mode 100644 index 0000000000..0c8a0ae06e --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Italic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Italic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Italic-webfont.ttf Binary files differnew file mode 100644 index 0000000000..12d25d9a73 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Italic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Italic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Italic-webfont.woff Binary files differnew file mode 100644 index 0000000000..ff652e6435 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Italic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Light-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Light-webfont.eot Binary files differnew file mode 100644 index 0000000000..14868406aa --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Light-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Light-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Light-webfont.ttf Binary files differnew file mode 100644 index 0000000000..63af664cde --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Light-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Light-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Light-webfont.woff Binary files differnew file mode 100644 index 0000000000..e786074813 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Light-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-LightItalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-LightItalic-webfont.eot Binary files differnew file mode 100644 index 0000000000..8f445929ff --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-LightItalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-LightItalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-LightItalic-webfont.ttf Binary files differnew file mode 100644 index 0000000000..01dda2858a --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-LightItalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-LightItalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-LightItalic-webfont.woff Binary files differnew file mode 100644 index 0000000000..43e8b9e6cc --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-LightItalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Regular-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Regular-webfont.eot Binary files differnew file mode 100644 index 0000000000..6bbc3cf58c --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Regular-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Regular-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Regular-webfont.ttf Binary files differnew file mode 100644 index 0000000000..c537f8382a --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Regular-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Regular-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Regular-webfont.woff Binary files differnew file mode 100644 index 0000000000..e231183dce --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Regular-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Semibold-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Semibold-webfont.eot Binary files differnew file mode 100644 index 0000000000..d8375dd0ab --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Semibold-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Semibold-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Semibold-webfont.ttf Binary files differnew file mode 100644 index 0000000000..b3290843a7 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Semibold-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Semibold-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Semibold-webfont.woff Binary files differnew file mode 100644 index 0000000000..28d6adee03 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-Semibold-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-SemiboldItalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-SemiboldItalic-webfont.eot Binary files differnew file mode 100644 index 0000000000..0ab1db22e6 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-SemiboldItalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-SemiboldItalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-SemiboldItalic-webfont.ttf Binary files differnew file mode 100644 index 0000000000..d2d6318f66 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-SemiboldItalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-SemiboldItalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-SemiboldItalic-webfont.woff Binary files differnew file mode 100644 index 0000000000..d4dfca402e --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/OpenSans-SemiboldItalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/open-sans/_open-sans.scss b/WebContent/VAADIN/themes/valo/fonts/open-sans/_open-sans.scss new file mode 100644 index 0000000000..ca5851a99d --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/open-sans/_open-sans.scss @@ -0,0 +1,155 @@ +$open-sans-pathPrefix: null; + +@if $v-relative-paths == false { + $open-sans-pathPrefix: "../valo/fonts/open-sans/"; +} + +@mixin font-open-sans-book ($italic: true) { + @font-face { + font-family: 'Open Sans'; + src: url('#{$open-sans-pathPrefix}OpenSans-Regular-webfont.eot'); + src: url('#{$open-sans-pathPrefix}OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$open-sans-pathPrefix}OpenSans-Regular-webfont.woff') format('woff'), + url('#{$open-sans-pathPrefix}OpenSans-Regular-webfont.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Open Sans'; + src: url('#{$open-sans-pathPrefix}OpenSans-Italic-webfont.eot'); + src: url('#{$open-sans-pathPrefix}OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$open-sans-pathPrefix}OpenSans-Italic-webfont.woff') format('woff'), + url('#{$open-sans-pathPrefix}OpenSans-Italic-webfont.ttf') format('truetype'); + font-weight: 400; + font-style: italic; + } + } +} + + + + +@mixin font-open-sans-light ($italic: true) { + @font-face { + font-family: 'Open Sans'; + src: url('#{$open-sans-pathPrefix}OpenSans-Light-webfont.eot'); + src: url('#{$open-sans-pathPrefix}OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$open-sans-pathPrefix}OpenSans-Light-webfont.woff') format('woff'), + url('#{$open-sans-pathPrefix}OpenSans-Light-webfont.ttf') format('truetype'); + font-weight: 300; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Open Sans'; + src: url('#{$open-sans-pathPrefix}OpenSans-LightItalic-webfont.eot'); + src: url('#{$open-sans-pathPrefix}OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$open-sans-pathPrefix}OpenSans-LightItalic-webfont.woff') format('woff'), + url('#{$open-sans-pathPrefix}OpenSans-LightItalic-webfont.ttf') format('truetype'); + font-weight: 300; + font-style: italic; + } + } +} + + + + + +@mixin font-open-sans-semibold ($italic: true) { + @font-face { + font-family: 'Open Sans'; + src: url('#{$open-sans-pathPrefix}OpenSans-Semibold-webfont.eot'); + src: url('#{$open-sans-pathPrefix}OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$open-sans-pathPrefix}OpenSans-Semibold-webfont.woff') format('woff'), + url('#{$open-sans-pathPrefix}OpenSans-Semibold-webfont.ttf') format('truetype'); + font-weight: 600; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Open Sans'; + src: url('#{$open-sans-pathPrefix}OpenSans-SemiboldItalic-webfont.eot'); + src: url('#{$open-sans-pathPrefix}OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$open-sans-pathPrefix}OpenSans-SemiboldItalic-webfont.woff') format('woff'), + url('#{$open-sans-pathPrefix}OpenSans-SemiboldItalic-webfont.ttf') format('truetype'); + font-weight: 600; + font-style: italic; + } + } +} + + + +@mixin font-open-sans-bold ($italic: true) { + @font-face { + font-family: 'Open Sans'; + src: url('#{$open-sans-pathPrefix}OpenSans-Bold-webfont.eot'); + src: url('#{$open-sans-pathPrefix}OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$open-sans-pathPrefix}OpenSans-Bold-webfont.woff') format('woff'), + url('#{$open-sans-pathPrefix}OpenSans-Bold-webfont.ttf') format('truetype'); + font-weight: 700; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Open Sans'; + src: url('#{$open-sans-pathPrefix}OpenSans-BoldItalic-webfont.eot'); + src: url('#{$open-sans-pathPrefix}OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$open-sans-pathPrefix}OpenSans-BoldItalic-webfont.woff') format('woff'), + url('#{$open-sans-pathPrefix}OpenSans-BoldItalic-webfont.ttf') format('truetype'); + font-weight: 700; + font-style: italic; + } + } +} + + + + + +@mixin font-open-sans-extrabold ($italic) { + @font-face { + font-family: 'Open Sans'; + src: url('#{$open-sans-pathPrefix}OpenSans-ExtraBold-webfont.eot'); + src: url('#{$open-sans-pathPrefix}OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$open-sans-pathPrefix}OpenSans-ExtraBold-webfont.woff') format('woff'), + url('#{$open-sans-pathPrefix}OpenSans-ExtraBold-webfont.ttf') format('truetype'); + font-weight: 900; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Open Sans'; + src: url('#{$open-sans-pathPrefix}OpenSans-ExtraBoldItalic-webfont.eot'); + src: url('#{$open-sans-pathPrefix}OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$open-sans-pathPrefix}OpenSans-ExtraBoldItalic-webfont.woff') format('woff'), + url('#{$open-sans-pathPrefix}OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'); + font-weight: 900; + font-style: italic; + } + } +} + + + + + +@mixin font-open-sans ($italic: false, $light: false, $regular: true, $medium: false, $bold: false, $black: false) { + @if $light { + @include font-open-sans-light($italic); + } + @if $regular { + @include font-open-sans-book($italic); + } + @if $medium { + @include font-open-sans-semibold($italic); + } + @if $bold { + @include font-open-sans-bold($italic); + } + @if $black { + @include font-open-sans-extrabold($italic); + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Black-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Black-webfont.eot Binary files differnew file mode 100755 index 0000000000..fa326d1d12 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Black-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Black-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Black-webfont.ttf Binary files differnew file mode 100755 index 0000000000..3c3b2b8ae6 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Black-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Black-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Black-webfont.woff Binary files differnew file mode 100755 index 0000000000..0229086571 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Black-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BlackItalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BlackItalic-webfont.eot Binary files differnew file mode 100755 index 0000000000..a2aebfb7da --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BlackItalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BlackItalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BlackItalic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..2020dcbc9c --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BlackItalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BlackItalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BlackItalic-webfont.woff Binary files differnew file mode 100755 index 0000000000..1875c0b950 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BlackItalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Bold-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Bold-webfont.eot Binary files differnew file mode 100755 index 0000000000..b73776ee3b --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Bold-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Bold-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Bold-webfont.ttf Binary files differnew file mode 100755 index 0000000000..1da72769a8 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Bold-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Bold-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Bold-webfont.woff Binary files differnew file mode 100755 index 0000000000..0c6994871e --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Bold-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BoldItalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BoldItalic-webfont.eot Binary files differnew file mode 100755 index 0000000000..b803ec1687 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BoldItalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BoldItalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BoldItalic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..78bab05c8c --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BoldItalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BoldItalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BoldItalic-webfont.woff Binary files differnew file mode 100755 index 0000000000..99de61af52 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-BoldItalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Italic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Italic-webfont.eot Binary files differnew file mode 100755 index 0000000000..b708f047ff --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Italic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Italic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Italic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..ae258e8416 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Italic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Italic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Italic-webfont.woff Binary files differnew file mode 100755 index 0000000000..dd74244382 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Italic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Light-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Light-webfont.eot Binary files differnew file mode 100755 index 0000000000..072cdc480c --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Light-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Light-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Light-webfont.ttf Binary files differnew file mode 100755 index 0000000000..3b2fea0ace --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Light-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Light-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Light-webfont.woff Binary files differnew file mode 100755 index 0000000000..cc534a3815 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Light-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-LightItalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-LightItalic-webfont.eot Binary files differnew file mode 100755 index 0000000000..77396a1ff9 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-LightItalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-LightItalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-LightItalic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..b9b38118a3 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-LightItalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-LightItalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-LightItalic-webfont.woff Binary files differnew file mode 100755 index 0000000000..3071ff4f23 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-LightItalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Medium-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Medium-webfont.eot Binary files differnew file mode 100755 index 0000000000..f9ad99566d --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Medium-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Medium-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Medium-webfont.ttf Binary files differnew file mode 100755 index 0000000000..8aa64d8232 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Medium-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Medium-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Medium-webfont.woff Binary files differnew file mode 100755 index 0000000000..cd810ef929 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Medium-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-MediumItalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-MediumItalic-webfont.eot Binary files differnew file mode 100755 index 0000000000..a03fe4b248 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-MediumItalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-MediumItalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-MediumItalic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..6439927f16 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-MediumItalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-MediumItalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-MediumItalic-webfont.woff Binary files differnew file mode 100755 index 0000000000..69a1458011 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-MediumItalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Regular-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Regular-webfont.eot Binary files differnew file mode 100755 index 0000000000..9b5e8e4138 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Regular-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Regular-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Regular-webfont.ttf Binary files differnew file mode 100755 index 0000000000..44dd78d5e1 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Regular-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Regular-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Regular-webfont.woff Binary files differnew file mode 100755 index 0000000000..bfa05d53f4 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Regular-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Thin-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Thin-webfont.eot Binary files differnew file mode 100755 index 0000000000..2284a3b3ef --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Thin-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Thin-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Thin-webfont.ttf Binary files differnew file mode 100755 index 0000000000..18919f7a96 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Thin-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Thin-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Thin-webfont.woff Binary files differnew file mode 100755 index 0000000000..f10b831e85 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-Thin-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-ThinItalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-ThinItalic-webfont.eot Binary files differnew file mode 100755 index 0000000000..e6291f2657 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-ThinItalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-ThinItalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-ThinItalic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..a4e7ae08e0 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-ThinItalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-ThinItalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-ThinItalic-webfont.woff Binary files differnew file mode 100755 index 0000000000..9ef17a8681 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/Roboto-ThinItalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Bold-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Bold-webfont.eot Binary files differnew file mode 100755 index 0000000000..bbc67d825b --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Bold-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Bold-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Bold-webfont.ttf Binary files differnew file mode 100755 index 0000000000..87256d3a34 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Bold-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Bold-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Bold-webfont.woff Binary files differnew file mode 100755 index 0000000000..235c963d69 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Bold-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-BoldItalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-BoldItalic-webfont.eot Binary files differnew file mode 100755 index 0000000000..5a95d1a144 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-BoldItalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-BoldItalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-BoldItalic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..059feb39c5 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-BoldItalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-BoldItalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-BoldItalic-webfont.woff Binary files differnew file mode 100755 index 0000000000..df69b95291 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-BoldItalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Italic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Italic-webfont.eot Binary files differnew file mode 100755 index 0000000000..985364ffed --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Italic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Italic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Italic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..d804301e70 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Italic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Italic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Italic-webfont.woff Binary files differnew file mode 100755 index 0000000000..67804e1e4d --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Italic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Light-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Light-webfont.eot Binary files differnew file mode 100755 index 0000000000..d492665160 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Light-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Light-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Light-webfont.ttf Binary files differnew file mode 100755 index 0000000000..321c450f22 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Light-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Light-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Light-webfont.woff Binary files differnew file mode 100755 index 0000000000..c414478ca5 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Light-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-LightItalic-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-LightItalic-webfont.eot Binary files differnew file mode 100755 index 0000000000..c169648374 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-LightItalic-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-LightItalic-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-LightItalic-webfont.ttf Binary files differnew file mode 100755 index 0000000000..905604d021 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-LightItalic-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-LightItalic-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-LightItalic-webfont.woff Binary files differnew file mode 100755 index 0000000000..5536e16c5d --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-LightItalic-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Regular-webfont.eot b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Regular-webfont.eot Binary files differnew file mode 100755 index 0000000000..5710fe6ead --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Regular-webfont.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Regular-webfont.ttf b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Regular-webfont.ttf Binary files differnew file mode 100755 index 0000000000..be9f6f8ab9 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Regular-webfont.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Regular-webfont.woff b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Regular-webfont.woff Binary files differnew file mode 100755 index 0000000000..ec28f95c87 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/RobotoCondensed-Regular-webfont.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/roboto/_roboto.scss b/WebContent/VAADIN/themes/valo/fonts/roboto/_roboto.scss new file mode 100644 index 0000000000..ddc6b4f5a7 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/roboto/_roboto.scss @@ -0,0 +1,155 @@ +$roboto-pathPrefix: null; + +@if $v-relative-paths == false { + $roboto-pathPrefix: "../valo/fonts/roboto/"; +} + +@mixin font-roboto-regular ($italic: true) { + @font-face { + font-family: 'Roboto'; + src: url('#{$roboto-pathPrefix}Roboto-Regular-webfont.eot'); + src: url('#{$roboto-pathPrefix}Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$roboto-pathPrefix}Roboto-Regular-webfont.woff') format('woff'), + url('#{$roboto-pathPrefix}Roboto-Regular-webfont.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Roboto'; + src: url('#{$roboto-pathPrefix}Roboto-Italic-webfont.eot'); + src: url('#{$roboto-pathPrefix}Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$roboto-pathPrefix}Roboto-Italic-webfont.woff') format('woff'), + url('#{$roboto-pathPrefix}Roboto-Italic-webfont.ttf') format('truetype'); + font-weight: 400; + font-style: italic; + } + } +} + + + + +@mixin font-roboto-thin ($italic: true) { + @font-face { + font-family: 'Roboto'; + src: url('#{$roboto-pathPrefix}Roboto-Thin-webfont.eot'); + src: url('#{$roboto-pathPrefix}Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$roboto-pathPrefix}Roboto-Thin-webfont.woff') format('woff'), + url('#{$roboto-pathPrefix}Roboto-Thin-webfont.ttf') format('truetype'); + font-weight: 300; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Roboto'; + src: url('#{$roboto-pathPrefix}Roboto-ThinItalic-webfont.eot'); + src: url('#{$roboto-pathPrefix}Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$roboto-pathPrefix}Roboto-ThinItalic-webfont.woff') format('woff'), + url('#{$roboto-pathPrefix}Roboto-ThinItalic-webfont.ttf') format('truetype'); + font-weight: 300; + font-style: italic; + } + } +} + + + + + +@mixin font-roboto-medium ($italic: true) { + @font-face { + font-family: 'Roboto'; + src: url('#{$roboto-pathPrefix}Roboto-Medium-webfont.eot'); + src: url('#{$roboto-pathPrefix}Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$roboto-pathPrefix}Roboto-Medium-webfont.woff') format('woff'), + url('#{$roboto-pathPrefix}Roboto-Medium-webfont.ttf') format('truetype'); + font-weight: 600; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Roboto'; + src: url('#{$roboto-pathPrefix}Roboto-MediumItalic-webfont.eot'); + src: url('#{$roboto-pathPrefix}Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$roboto-pathPrefix}Roboto-MediumItalic-webfont.woff') format('woff'), + url('#{$roboto-pathPrefix}Roboto-MediumItalic-webfont.ttf') format('truetype'); + font-weight: 600; + font-style: italic; + } + } +} + + + +@mixin font-roboto-bold ($italic: true) { + @font-face { + font-family: 'Roboto'; + src: url('#{$roboto-pathPrefix}Roboto-Bold-webfont.eot'); + src: url('#{$roboto-pathPrefix}Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$roboto-pathPrefix}Roboto-Bold-webfont.woff') format('woff'), + url('#{$roboto-pathPrefix}Roboto-Bold-webfont.ttf') format('truetype'); + font-weight: 700; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Roboto'; + src: url('#{$roboto-pathPrefix}Roboto-BoldItalic-webfont.eot'); + src: url('#{$roboto-pathPrefix}Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$roboto-pathPrefix}Roboto-BoldItalic-webfont.woff') format('woff'), + url('#{$roboto-pathPrefix}Roboto-BoldItalic-webfont.ttf') format('truetype'); + font-weight: 700; + font-style: italic; + } + } +} + + + + + +@mixin font-roboto-black ($italic) { + @font-face { + font-family: 'Roboto'; + src: url('#{$roboto-pathPrefix}Roboto-Black-webfont.eot'); + src: url('#{$roboto-pathPrefix}Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$roboto-pathPrefix}Roboto-Black-webfont.woff') format('woff'), + url('#{$roboto-pathPrefix}Roboto-Black-webfont.ttf') format('truetype'); + font-weight: 900; + font-style: normal; + } + @if $italic { + @font-face { + font-family: 'Roboto'; + src: url('#{$roboto-pathPrefix}Roboto-BlackItalic-webfont.eot'); + src: url('#{$roboto-pathPrefix}Roboto-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'), + url('#{$roboto-pathPrefix}Roboto-BlackItalic-webfont.woff') format('woff'), + url('#{$roboto-pathPrefix}Roboto-BlackItalic-webfont.ttf') format('truetype'); + font-weight: 900; + font-style: italic; + } + } +} + + + + + +@mixin font-roboto ($italic: false, $light: false, $regular: true, $medium: false, $bold: false, $black: false) { + @if $light { + @include font-roboto-thin($italic); + } + @if $regular { + @include font-roboto-regular($italic); + } + @if $medium { + @include font-roboto-medium($italic); + } + @if $bold { + @include font-roboto-bold($italic); + } + @if $black { + @include font-roboto-black($italic); + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/_source-sans-pro.scss b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/_source-sans-pro.scss new file mode 100644 index 0000000000..f324e8f1fb --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/_source-sans-pro.scss @@ -0,0 +1,184 @@ +$source-sans-pro-pathPrefix: null; + +@if $v-relative-paths == false { + $source-sans-pro-pathPrefix: "../valo/fonts/source-sans-pro/"; +} + +@mixin font-source-sans-pro-regular ($italic: true) { + @font-face { + font-family: "Source Sans Pro"; + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-regular.eot'); + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-regular.eot?#iefix') format('embedded-opentype'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-regular.woff') format('woff'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; + } + @if $italic { + @font-face { + font-family: "Source Sans Pro"; + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-it.eot'); + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-it.eot?#iefix') format('embedded-opentype'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-it.woff') format('woff'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-it.ttf') format('truetype'); + font-weight: 400; + font-style: italic; + } + } +} + + + + +@mixin font-source-sans-pro-extralight ($italic: true) { + @font-face { + font-family: "Source Sans Pro"; + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-extralight.eot'); + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-extralight.eot?#iefix') format('embedded-opentype'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-extralight.woff') format('woff'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-extralight.ttf') format('truetype'); + font-weight: 300; + font-style: normal; + } + @if $italic { + @font-face { + font-family: "Source Sans Pro"; + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-extralightit.eot'); + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-extralightit.eot?#iefix') format('embedded-opentype'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-extralightit.woff') format('woff'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-extralightit.ttf') format('truetype'); + font-weight: 300; + font-style: italic; + } + } +} + + + + +@mixin font-source-sans-pro-light ($italic: true) { + @font-face { + font-family: "Source Sans Pro"; + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-light.eot'); + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-light.eot?#iefix') format('embedded-opentype'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-light.woff') format('woff'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; + } + @if $italic { + @font-face { + font-family: "Source Sans Pro"; + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-lightit.eot'); + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-lightit.eot?#iefix') format('embedded-opentype'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-lightit.woff') format('woff'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-lightit.ttf') format('truetype'); + font-weight: 300; + font-style: italic; + } + } +} + + + + + +@mixin font-source-sans-pro-semibold ($italic: true) { + @font-face { + font-family: "Source Sans Pro"; + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-semibold.eot'); + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-semibold.eot?#iefix') format('embedded-opentype'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-semibold.woff') format('woff'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-semibold.ttf') format('truetype'); + font-weight: 600; + font-style: normal; + } + @if $italic { + @font-face { + font-family: "Source Sans Pro"; + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-semiboldit.eot'); + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-semiboldit.eot?#iefix') format('embedded-opentype'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-semiboldit.woff') format('woff'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-semiboldit.ttf') format('truetype'); + font-weight: 600; + font-style: italic; + } + } +} + + + +@mixin font-source-sans-pro-bold ($italic: true) { + @font-face { + font-family: "Source Sans Pro"; + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-bold.eot'); + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-bold.eot?#iefix') format('embedded-opentype'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-bold.woff') format('woff'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; + } + @if $italic { + @font-face { + font-family: "Source Sans Pro"; + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-boldit.eot'); + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-boldit.eot?#iefix') format('embedded-opentype'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-boldit.woff') format('woff'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-boldit.ttf') format('truetype'); + font-weight: 700; + font-style: italic; + } + } +} + + + + + +@mixin font-source-sans-pro-black ($italic) { + @font-face { + font-family: "Source Sans Pro"; + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-black.eot'); + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-black.eot?#iefix') format('embedded-opentype'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-black.woff') format('woff'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-black.ttf') format('truetype'); + font-weight: 900; + font-style: normal; + } + @if $italic { + @font-face { + font-family: "Source Sans Pro"; + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-blackit.eot'); + src: url('#{$source-sans-pro-pathPrefix}sourcesanspro-blackit.eot?#iefix') format('embedded-opentype'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-blackit.woff') format('woff'), + url('#{$source-sans-pro-pathPrefix}sourcesanspro-blackit.ttf') format('truetype'); + font-weight: 900; + font-style: italic; + } + } +} + + + + + +@mixin font-source-sans-pro ($italic: false, $extralight: false, $light: false, $regular: true, $medium: false, $bold: false, $black: false) { + @if $extralight { + @include font-source-sans-pro-extralight($italic); + } + @if $light { + @include font-source-sans-pro-light($italic); + } + @if $regular { + @include font-source-sans-pro-regular($italic); + } + @if $medium { + @include font-source-sans-pro-semibold($italic); + } + @if $bold { + @include font-source-sans-pro-bold($italic); + } + @if $black { + @include font-source-sans-pro-black($italic); + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-black.eot b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-black.eot Binary files differnew file mode 100644 index 0000000000..52d89ee8c2 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-black.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-black.ttf b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-black.ttf Binary files differnew file mode 100644 index 0000000000..0d727c31f0 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-black.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-black.woff b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-black.woff Binary files differnew file mode 100644 index 0000000000..2c80d40f53 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-black.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-blackit.eot b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-blackit.eot Binary files differnew file mode 100644 index 0000000000..a6e65ae2c2 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-blackit.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-blackit.ttf b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-blackit.ttf Binary files differnew file mode 100644 index 0000000000..d40b74c1a6 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-blackit.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-blackit.woff b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-blackit.woff Binary files differnew file mode 100644 index 0000000000..e48d2d80cb --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-blackit.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-bold.eot b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-bold.eot Binary files differnew file mode 100644 index 0000000000..b255c35b76 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-bold.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-bold.ttf b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-bold.ttf Binary files differnew file mode 100644 index 0000000000..47468b5140 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-bold.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-bold.woff b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-bold.woff Binary files differnew file mode 100644 index 0000000000..454b77ff0d --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-bold.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-boldit.eot b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-boldit.eot Binary files differnew file mode 100644 index 0000000000..a5565ddebb --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-boldit.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-boldit.ttf b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-boldit.ttf Binary files differnew file mode 100644 index 0000000000..2fb6404d6e --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-boldit.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-boldit.woff b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-boldit.woff Binary files differnew file mode 100644 index 0000000000..57bd10d301 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-boldit.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralight.eot b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralight.eot Binary files differnew file mode 100644 index 0000000000..2c588f017a --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralight.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralight.ttf b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralight.ttf Binary files differnew file mode 100644 index 0000000000..e4d3b9245b --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralight.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralight.woff b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralight.woff Binary files differnew file mode 100644 index 0000000000..709eae0398 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralight.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralightit.eot b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralightit.eot Binary files differnew file mode 100644 index 0000000000..0fe99615a2 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralightit.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralightit.ttf b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralightit.ttf Binary files differnew file mode 100644 index 0000000000..314d9b1226 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralightit.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralightit.woff b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralightit.woff Binary files differnew file mode 100644 index 0000000000..14038f36eb --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-extralightit.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-it.eot b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-it.eot Binary files differnew file mode 100644 index 0000000000..989e7dd271 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-it.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-it.ttf b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-it.ttf Binary files differnew file mode 100644 index 0000000000..076a656119 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-it.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-it.woff b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-it.woff Binary files differnew file mode 100644 index 0000000000..94a41380e2 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-it.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-light.eot b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-light.eot Binary files differnew file mode 100644 index 0000000000..5618f2748d --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-light.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-light.ttf b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-light.ttf Binary files differnew file mode 100644 index 0000000000..483301619e --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-light.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-light.woff b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-light.woff Binary files differnew file mode 100644 index 0000000000..f9f0aa1198 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-light.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-lightit.eot b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-lightit.eot Binary files differnew file mode 100644 index 0000000000..3cce3f54df --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-lightit.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-lightit.ttf b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-lightit.ttf Binary files differnew file mode 100644 index 0000000000..fb2f58f981 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-lightit.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-lightit.woff b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-lightit.woff Binary files differnew file mode 100644 index 0000000000..d8ea82bae2 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-lightit.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-regular.eot b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-regular.eot Binary files differnew file mode 100644 index 0000000000..4968aa134a --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-regular.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-regular.ttf b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-regular.ttf Binary files differnew file mode 100644 index 0000000000..3939d7019d --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-regular.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-regular.woff b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-regular.woff Binary files differnew file mode 100644 index 0000000000..5b3283af6a --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-regular.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semibold.eot b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semibold.eot Binary files differnew file mode 100644 index 0000000000..7d8014869c --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semibold.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semibold.ttf b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semibold.ttf Binary files differnew file mode 100644 index 0000000000..b108896526 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semibold.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semibold.woff b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semibold.woff Binary files differnew file mode 100644 index 0000000000..a138eb3076 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semibold.woff diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semiboldit.eot b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semiboldit.eot Binary files differnew file mode 100644 index 0000000000..53093c24c4 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semiboldit.eot diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semiboldit.ttf b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semiboldit.ttf Binary files differnew file mode 100644 index 0000000000..dc5c032c73 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semiboldit.ttf diff --git a/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semiboldit.woff b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semiboldit.woff Binary files differnew file mode 100644 index 0000000000..e7a09d7141 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/fonts/source-sans-pro/sourcesanspro-semiboldit.woff diff --git a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss new file mode 100644 index 0000000000..09d29b7d9f --- /dev/null +++ b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss @@ -0,0 +1,441 @@ +// Common styles for components +// About 90KB of CSS output + +@import "valo-menu"; + +@mixin valo-common-stylenames { + + $v-scaling-factor--small: 0.8 !default; + $v-scaling-factor--large: 1.2 !default; + + $v-unit-size--small: ceil($v-unit-size * $v-scaling-factor--small); + $v-unit-size--large: ceil($v-unit-size * $v-scaling-factor--large); + + $v-font-size--small: ceil($v-font-size * $v-scaling-factor--small); + $v-font-size--large: ceil($v-font-size * $v-scaling-factor--large); + + $v-friendly-color: #2c9720; + + + .v-button-primary { + @include valo-button-style($background-color: $v-selection-color); + $padding-width: round($v-unit-size/2); + padding: 0 $padding-width; + font-weight: bold; + $min-width: round($v-unit-size * 2.2); + min-width: $min-width; + + // IE8 + border-box + min-width == fail + .v-ie8 & { + min-width: $min-width - $padding-width*2; + } + } + + .v-button-friendly { + @include valo-button-style($background-color: $v-friendly-color); + } + + .v-button-danger { + @include valo-button-style($background-color: $v-error-indicator-color); + } + + .v-button-borderless { + @include valo-button-borderless-style; + } + + .v-button-borderless-colored { + @include valo-button-borderless-style($font-color: $v-selection-color); + } + + .v-button-quiet { + @include valo-button-quiet-style; + } + + .v-button-link { + @include valo-button-borderless-style; + @include valo-link-style; + } + + .v-button-small { + @include valo-button-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--small, $font-weight: null); + } + + .v-button-large { + @include valo-button-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--large, $font-weight: null); + } + + .v-button-icon-align-right { + @include valo-button-icon-align-right-style; + } + + .v-button-icon-align-top { + @include valo-button-icon-align-top-style; + } + + .v-button-icon-only { + width: $v-unit-size; + padding: 0; + + &.v-button-small { + width: $v-unit-size--small; + } + + &.v-button-large { + width: $v-unit-size--large; + } + + .v-button-caption { + display: none; + } + } + + .v-link-small { + font-size: $v-font-size--small; + } + + .v-link-large { + font-size: $v-font-size--large; + } + + .v-tabsheet-equal-width-tabs { + @include valo-tabsheet-equal-width-tabs-style($flex: false); + } + + .v-tabsheet-framed { + @include valo-tabsheet-framed-style; + } + + .v-tabsheet-centered-tabs { + @include valo-tabsheet-align-tabs-style($align: center); + } + + .v-tabsheet-right-aligned-tabs { + @include valo-tabsheet-align-tabs-style($align: right); + } + + .v-tabsheet-padded-tabbar { + @include valo-tabsheet-padded-tabbar-style; + } + + .v-tabsheet-icons-on-top { + @include valo-tabsheet-icons-on-top-style; + } + + .v-tabsheet-compact-tabbar { + > .v-tabsheet-tabcontainer-compact-tabbar .v-caption { + line-height: 1.8; + } + } + + .v-tabsheet-only-selected-closable { + @include valo-tabsheet-only-selected-closable-style; + } + + .v-panel-borderless { + @include valo-panel-borderless-style; + } + + .v-formlayout.light { + @include valo-formlayout-light-style; + } + + .v-textfield-borderless, + .v-textarea-borderless, + .v-datefield-borderless .v-datefield-textfield, + .v-filterselect-borderless .v-filterselect-input { + @include valo-textfield-borderless-style; + } + + .v-datefield-borderless .v-datefield-button, + .v-filterselect-borderless .v-filterselect-button { + border: none; + } + + .v-textfield-small { + @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null); + font-size: $v-font-size--small; + } + + .v-textfield-large { + @include valo-textfield-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null); + font-size: $v-font-size--large; + } + + @include valo-textfield-inline-icon($stylenames: inline-icon); + @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small); + @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large); + + .v-textarea-small { + @include valo-textarea-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); + font-size: $v-font-size--small; + } + + .v-textarea-large { + @include valo-textarea-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null); + font-size: $v-font-size--large; + } + + .v-textfield-align-right, + .v-textarea-align-right, + .v-datefield-align-right input, + .v-filterselect-align-right input { + text-align: right; + } + + .v-textfield-align-center, + .v-textarea-align-center, + .v-datefield-align-center input, + .v-filterselect-align-center input { + text-align: center; + } + + .v-filterselect-small { + @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null); + font-size: $v-font-size--small; + } + + .v-filterselect-large { + @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null); + font-size: $v-font-size--large; + } + + .v-datefield-small { + @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null); + font-size: $v-font-size--small; + } + + .v-datefield-large { + @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null); + font-size: $v-font-size--large; + } + + .v-checkbox-small { + @include valo-checkbox-style($unit-size: $v-unit-size--small); + font-size: $v-font-size--small; + } + + .v-checkbox-large { + @include valo-checkbox-style($unit-size: $v-unit-size--large); + font-size: $v-font-size--large; + } + + .v-select-optiongroup-small { + @include valo-optiongroup-style($unit-size: $v-unit-size--small); + font-size: $v-font-size--small; + } + + .v-select-optiongroup-large { + @include valo-optiongroup-style($unit-size: $v-unit-size--large); + font-size: $v-font-size--large; + } + + .v-label-spinner { + @include valo-spinner; + } + + .v-panel-well { + @include valo-panel-well-style; + } + + .v-panel-borderless { + @include valo-panel-borderless-style; + } + + .v-panel-scroll-divider { + @include valo-panel-scroll-divider-style; + } + + .v-csslayout-well, + .v-verticallayout-well, + .v-horizontallayout-well { + @include valo-panel-well-style; + @include valo-panel-adjust-content-margins; + } + + .v-csslayout-card, + .v-verticallayout-card, + .v-horizontallayout-card { + @include valo-panel-style; + @include valo-panel-adjust-content-margins; + } + + .v-splitpanel-horizontal.large, + .v-splitpanel-vertical.large { + @include valo-splitpanel-style($splitter-size: round($v-unit-size/3), $splitter-handle-visible: true); + } + + .v-menubar-small { + @include valo-menubar-small-style($unit-size: $v-unit-size--small); + font-size: $v-font-size--small; + } + + .v-menubar-borderless { + @include valo-menubar-borderless-style; + } + + @include valo-component-group; + + .wrapping { + @include valo-horizontallayout--wrapping; + } + + .v-Notification.bar { + @include valo-notification-bar-style; + } + + .v-Notification.small { + @include valo-notification-small-style; + } + + .v-Notification.closable { + @include valo-notification-closable-style; + + &.error, + &.system { + &:after { + color: #fff; + border-color: #fff; + border-color: rgba(255,255,255,.3); + } + &:active:after { + background-color: #fff; + color: #000; + } + } + + &.tray:after { + top: round($v-unit-size/2.3); + margin-top: 0; + } + } + + .v-Notification.success, + .v-Notification.failure { + background: #fff; + color: #555; + border: 2px solid $v-friendly-color; + + h1 { + color: $v-friendly-color; + font-weight: $v-font-weight + 100; + + &:before { + font-family: FontAwesome; + content: "\f00c"; + margin-right: .5em; + } + } + + &.bar { + margin: -2px !important; + } + } + + .v-Notification.failure { + border-color: $v-error-indicator-color; + + h1 { + color: $v-error-indicator-color; + + &:before { + content: "\f05e"; + } + } + } + + .v-label-success, + .v-label-failure { + background: #fff; + color: #555; + border: 2px solid $v-friendly-color; + border-radius: $v-border-radius; + padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size); + font-weight: $v-font-weight + 100; + font-size: round($v-font-size * 0.95); + + &:before { + font-family: FontAwesome; + content: "\f00c"; + margin-right: .5em; + margin-left: round($v-unit-size/-2); + color: $v-friendly-color; + } + } + + .v-label-failure { + border-color: $v-error-indicator-color; + + &:before { + content: "\f05e"; + color: $v-error-indicator-color; + } + } + + + .v-panel-caption.v-horizontallayout { + height: auto !important; + line-height: 0; + + .v-slot { + vertical-align: middle; + } + + .v-label { + line-height: $v-unit-size; + } + } + + + .v-select-optiongroup-horizontal { + @include valo-optiongroup-horizontal; + } + + + .v-table-no-stripes { + @include valo-table-no-stripes-style; + } + + .v-table-no-vertical-lines { + @include valo-table-no-vertical-lines-style; + } + + .v-table-no-horizontal-lines { + @include valo-table-no-horizontal-lines-style; + } + + .v-table-no-header { + @include valo-table-no-header-style; + } + + .v-table-borderless { + @include valo-table-borderless-style; + } + + .v-table-compact, + .v-table-small { + @include valo-table-spacing-style($row-height: round($v-table-row-height * $v-scaling-factor--small), $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2)); + } + + .v-table-small { + font-size: $v-font-size--small; + } + + + .v-accordion-borderless { + border: none; + border-radius: 0; + @include box-shadow(none); + + > .v-accordion-item { + border-radius: 0; + } + } + + .v-slider-no-indicator { + @include valo-slider-no-indicator; + } + + + @include valo-menu; + +} diff --git a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss b/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss new file mode 100644 index 0000000000..f3377f232c --- /dev/null +++ b/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss @@ -0,0 +1,214 @@ +$valo-menu-background-color: null !default; + +@mixin valo-menu { + + $bg-lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%); + $bg: $valo-menu-background-color or scale-color($v-app-background-color, $lightness: $bg-lightness); + $font-color: valo-font-color($bg, 0.5); + + .valo-menu { + height: 100%; + @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 0%, $bg round($v-unit-size/4)), $fallback: $bg); + color: $font-color; + font-size: round($v-font-size * 0.9); + line-height: round($v-unit-size * 0.8); + border-right: valo-border($color: $bg); + white-space: nowrap; + + .valo-menu-part { + border-left: valo-border($color: $bg, $strength: 0.6); + height: 100%; + padding-bottom: $v-unit-size; + overflow: auto; + + &:first-child { + border-left: none; + } + } + + .valo-menu-title, + .valo-menu-subtitle, + .valo-menu-item { + display: block; + line-height: inherit; + white-space: nowrap; + position: relative; + + .valo-menu-badge { + position: absolute; + right: round($v-unit-size/2); + } + } + + .valo-menu-title { + line-height: 1.2; + @include valo-gradient($color: $v-selection-color); + $font-color: valo-font-color($v-selection-color, 1); + color: $font-color; + text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color); + padding: round($v-unit-size/3) round($v-unit-size/2); + font-size: round($v-font-size * 0.9); + border-bottom: valo-border($color: $v-selection-color); + @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow)); + + .v-menubar { + background: transparent; + border-color: first-color(valo-border($color: $v-selection-color)); + color: inherit; + @include box-shadow(none); + text-shadow: inherit; + } + + .v-menubar-menuitem { + background: transparent; + @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient)); + text-shadow: inherit; + font-size: $v-font-size; + border-color: inherit; + } + } + + .valo-menu-subtitle { + color: valo-font-color($bg, 0.33); + margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2); + border-bottom: valo-border($color: $bg, $strength: 0.5, $border: first-number($v-border) solid v-tone); + + .valo-menu-badge { + color: mix(valo-font-color($bg), $v-selection-color); + } + } + + .valo-menu-item { + outline: none; + font-weight: $v-font-weight + 100; + padding: 0 round($v-unit-size) 0 round($v-unit-size/2); + cursor: pointer; + position: relative; + text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $bg, $offset: -2px); + @include transition(background-color 300ms, color 60ms); + + $diff: color-luminance($bg) - color-luminance($v-selection-color); + $active-color: $v-selection-color; + @if abs($diff) < 30 { + $active-color: lighten($v-selection-color, 10%); + } + + .valo-menu-item-caption { + vertical-align: middle; + display: inline-block; + width: 90%; + max-width: 15em; + padding-right: round($v-unit-size/2); + text-overflow: ellipsis; + overflow: hidden; + } + + &.selected { + background: darken($bg, 3%); + + .v-icon { + color: $active-color; + } + + .valo-menu-badge { + @include valo-gradient($color: $active-color); + color: valo-font-color($active-color); + } + } + + &:hover, + &.selected { + color: valo-font-color($bg, 1); + } + + // Font icons + span.v-icon { + min-width: 1em; + margin-right: round($v-unit-size/2); + text-align: center; + vertical-align: middle; + + + span { + margin-left: 0; + } + } + + .valo-menu-badge { + background: lighten($bg, 5%); + @include transition(background-color 300ms); + line-height: 1; + padding: round($v-unit-size/9) round($v-unit-size/6); + min-width: round($v-font-size/1.5); + text-align: center; + top: (round($v-unit-size * 0.8) - round($v-font-size * 0.9) - round($v-unit-size/9) * 2) / 2; + border-radius: $v-border-radius; + } + } + + .valo-menu-part.large-icons { + $bg: darken($bg, 4%); + background-color: $bg; + + .valo-menu-item { + font-size: $v-unit-size; + line-height: 1; + padding: round($v-unit-size/3); + min-width: $v-unit-size * 2; + max-width: $v-unit-size * 3; + text-align: center; + + .valo-menu-item-caption { + display: block; + width: auto; + margin: .3em 0 0; + padding: 0; + font-size: round($v-font-size * 0.7); + } + + .v-icon { + margin: 0; + } + + span.v-icon { + opacity: 0.8; + } + + &.selected { + background: darken($bg, 3%); + + .v-icon { + opacity: 1; + } + + .valo-menu-badge { + border-color: darken($bg, 3%); + } + } + + .valo-menu-badge { + padding-left: round($v-unit-size/9); + padding-right: round($v-unit-size/9); + top: round($v-unit-size/5); + right: round($v-unit-size/5); + border: 2px solid $bg; + } + } + } + + .valo-menu-logo { + display: block; + overflow: hidden; + width: round($v-unit-size * 1.2) !important; + height: round($v-unit-size * 1.2); + border-radius: $v-border-radius; + text-align: center; + @include valo-gradient($color: $v-selection-color); + color: valo-font-color($v-selection-color, 1); + font-size: round($v-unit-size/1.5); + line-height: round($v-unit-size * 1.2); + margin: round($v-unit-size/2) auto; + @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow)); + } + } + +} diff --git a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss new file mode 100644 index 0000000000..8a3894b524 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss @@ -0,0 +1,19 @@ +@mixin valo-contextmenu { + + .v-contextmenu { + @include valo-selection-overlay-style; + + table { + border-spacing: 0; + } + } + + .v-contextmenu .gwt-MenuItem { + @include valo-selection-item-style; + } + + .v-contextmenu .gwt-MenuItem-selected { + @include valo-selection-item-selected-style; + } + +} diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss new file mode 100644 index 0000000000..71d72b367c --- /dev/null +++ b/WebContent/VAADIN/themes/valo/shared/_global.scss @@ -0,0 +1,393 @@ +@import "loading-indicator"; +@import "contextmenu"; +@import "overlay"; +@import "notification"; +@import "tooltip"; + + +$v-app-background-color: $v-background-color !default; + + +// Include global styles only once +$valo-global-included: false !default; +@mixin valo-global { + @if $valo-global-included == false { + + // Core widget styles come before any other component (and are always included), + // so that it has the least specificity + @include valo-widget; + + .v-generated-body { + overflow: hidden; + margin: 0; + padding: 0; + border: 0; + } + + .v-app { + height: 100%; + // Cancel tap highlight from all elements inside the app + -webkit-tap-highlight-color: rgba(0,0,0,0); + + // Prevent iOS text size adjust after orientation change, without disabling user zoom + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + } + + .v-ui { + position: relative; + } + + // Prevent margin collapse + .v-ui.v-ui-embedded { + margin-top: -1px; + border-top: 1px solid transparent; + } + + .v-ui:focus { + outline: none; + } + + .v-overlay-container { + width: 0; + height: 0; + } + + // Removes clear button from input fields introduced by IE10 + input::-ms-clear { + display: none; + } + + .v-drag-element { + z-index: 60000; + // Override any other position properties + position: absolute !important; + cursor: default; + } + + .v-clip { + overflow: hidden; + } + + .v-scrollable { + overflow: auto; + + // "Unnecessary scrollbar" related fixes + > .v-widget { + // This is needed for IE + vertical-align: middle; + + // Needed for all browsers. Can't really show anything outside the + // scrolling area anyway, so we can safely hide any overflow + overflow: hidden; + } + } + + .v-ios.v-webkit .v-scrollable { + -webkit-overflow-scrolling: touch; + } + + // Disable native scrolling on iOS 5 due to issue #8792 + .v-ios5.v-webkit .v-scrollable { + -webkit-overflow-scrolling: none; + } + + .v-assistive-device-only { + position: absolute; + top: -2000px; + left: -2000px; + width: 10px; + overflow: hidden; + } + + .v-icon { + cursor: inherit; + } + + .v-icon, + .v-errorindicator, + .v-required-field-indicator { + display: inline-block; + line-height: inherit; + } + + .v-caption { + display: inline-block; + white-space: nowrap; + line-height: $v-line-height; + } + + .v-captiontext { + display: inline-block; + line-height: inherit; + } + + // Component global styles should also be included here + @if v-is-included(orderedlayout) { + @include valo-orderedlayout-global; + } + + @if v-is-included(gridlayout) { + @include valo-gridlayout-global; + } + + @if v-is-included(calendar) { + @include valo-calendar-global; + } + + @if v-is-included(colorpicker) { + @include valo-colorpicker-global; + } + + @if v-is-included(table) or v-is-included(treetable) { + @include valo-table-global; + } + + @if v-is-included(tabsheet) { + @include valo-tabsheet-global; + } + + @if v-is-included(splitpanel) { + @include valo-splitpanel-global; + } + + $valo-global-included: true; + } +} + + + +$valo-shared-pathPrefix: null; + +@if $v-relative-paths == false { + $valo-shared-pathPrefix: "../valo/shared/"; +} + + +@mixin valo-app-style { + font: $v-font-weight #{$v-font-size}/#{$v-line-height} $v-font-family; + color: $v-font-color; + background-color: $v-app-background-color; + cursor: default; + + // Default to Helvetica Neue on Macs instead of Helvetica, which has a slightly different baseline + @if $v-font-family == sans-serif { + .v-mac & { + font-family: "Helvetica Neue", sans-serif; + } + } +} + + +@mixin valo-common { + + //@if & != null { + // &, + // &.v-app-loading { + // @include valo-app-style; + // } + //} @else { + &.v-app, + &.v-app-loading { + @include valo-app-style; + } + //} + + //&.v-overlay-container { + // position: absolute; + // top: 0; + //} + + .v-app-loading { + width: 100%; + height: 100%; + background: $v-app-background-color; + + $_size: 28px + round($v-unit-size/2); + + &:before { + content: ""; + position: fixed; + z-index: 100; + top: 45%; + left: 50%; + width: 28px; + height: 28px; + padding: round($v-unit-size/4); + margin-top: round($_size/-2); + margin-left: round($_size/-2); + background: #fff url(#{$valo-shared-pathPrefix}img/spinner.gif) no-repeat 50%; + border-radius: $v-border-radius; + } + + @if $v-app-loading-text != "" { + &:after { + position: fixed; + z-index: 100; + top: 45%; + padding-top: $_size; + text-align: center; + left: 0; + right: 0; + content: $v-app-loading-text; + } + } + } + + @include valo-loading-bar; + + + // Fallback spinner for browsers without CSS animations + .v-ie8 &, + .v-ie9 & { + .v-loading-indicator, + .v-loading-indicator-delay, + .v-loading-indicator-wait { + width: 28px !important; + height: 28px; + padding: round($v-unit-size/4); + background: #fff url(#{$valo-shared-pathPrefix}img/spinner.gif) no-repeat 50%; + border-radius: $v-border-radius; + top: round($v-unit-size/4); + right: round($v-unit-size/4); + left: auto; + filter: alpha(opacity=50); + + &[style*="none"] { + display: none !important; + } + } + + .v-loading-indicator-wait { + filter: alpha(opacity=100); + } + } + + .v-scrollable:focus { + outline: none; + } + + img.v-icon { + vertical-align: middle; + } + + .v-caption { + @include valo-caption-style; + } + + .v-caption-on-left .v-caption, + .v-caption-on-right .v-caption { + padding-top: 0; + padding-bottom: 0; + } + + .v-icon + .v-captiontext, + .v-icon + span { + margin-left: round($v-unit-size/5); + + &:empty { + margin-left: 0; + } + } + + .v-errorindicator { + @include valo-error-indicator-style; + } + + .v-required-field-indicator { + color: $v-required-field-indicator-color; + padding: 0 .2em; + } + + select { + font: inherit; + font-weight: 400; + line-height: inherit; + color: inherit; + padding: round($v-unit-size/8); + margin: 0; + border-radius: $v-border-radius; + + @include valo-nativeselect-select-style; + } + + button { + font: inherit; + font-weight: 400; + line-height: $v-line-height; + } + + a { + @include valo-link-style; + } + + .v-disabled { + cursor: default !important; + } + + @include valo-drag-element; + + @include valo-tooltip; + + @include valo-contextmenu; + +} + + + + +@mixin valo-caption-style { + font-size: $v-caption-font-size; + font-weight: $v-caption-font-weight; + padding-bottom: .3em; + @if $v-border-radius > 0 { + padding-left: round($v-border-radius/4); + } +} + + + +@mixin valo-error-indicator-style { + color: $v-error-indicator-color; + font-weight: 600; + width: ceil($v-unit-size/2); + text-align: center; + + &:before { + @include valo-error-indicator-icon-style; + } +} + +@mixin valo-error-indicator-icon-style { + content: "!"; +} + + + +// Make the BODY element scrollable instead of the .v-ui element. Scrolling the BODY works better on touch screens. +// NOTE: breaks percentage sized overlay elements +// @mixin valo-natural-page-scrolling +// @usage +// // Call without any parent selector somewhere in your theme +// =valo-natural-page-scrolling; +@mixin valo-natural-page-scrolling { + + html { + height: auto; + } + + .v-generated-body { + height: auto; + overflow: auto; + background-color: $v-app-background-color; + } + + .v-app, + .v-ui.v-scrollable { + width: auto !important; + height: auto !important; + overflow: visible !important; + } + +} diff --git a/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss new file mode 100644 index 0000000000..56aab30d2b --- /dev/null +++ b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss @@ -0,0 +1,138 @@ +// TODO make fallbacks for IE 8 & 9 + +@-webkit-keyframes v-rotate-360 { + to {-webkit-transform: rotate(360deg);} +} +@-moz-keyframes v-rotate-360 { + to {-moz-transform: rotate(360deg);} +} +@-o-keyframes v-rotate-360 { + to {-o-transform: rotate(360deg);} +} +@keyframes v-rotate-360 { + to {transform: rotate(360deg);} +} + + +@mixin valo-spinner ($size: 24px, $thickness: 2px, $color: null, $speed: 500ms) { + $color: $color or $v-focus-color; + // Make size divisible by 2, so that the rotation won't jiggle + $size: round($size) + round($size) % 2; + height: $size !important; + width: $size !important; + @include box-sizing(border-box); + border: $thickness solid transparentize($color, .8); + border-top-color: $color; + border-right-color: $color; + border-radius: 100%; + @include animation(v-rotate-360 $speed infinite linear); + pointer-events: none; + + // No CSS animation in IE8 and IE9 + .v-ie8 &, + .v-ie9 & { + border: none; + border-radius: $v-border-radius; + background: #fff url(#{$valo-shared-pathPrefix}img/spinner.gif) no-repeat 50% 50%; + background-size: 80%; + } + + // No background-size for IE8 + .v-ie8 & { + min-width: 30px; + min-height: 30px; + } +} + + + + + + + + + + + + + + + + + +$v-loading-indicator-color: $v-focus-color !default; +$v-loading-indicator-bar-height: ceil($v-unit-size/10) !default; +$v-loading-indicator-bar-height--wait: ceil($v-unit-size/6) !default; + + + +@include keyframes(v-progress-start) { + 0% { width: 0%; } + 100% { width: 50%; } +} + +@include keyframes(v-progress-delay) { + 0% { width: 50%; } + 100% { width: 90%; } +} + +@include keyframes(v-progress-wait) { + 0% { width: 90%; height: $v-loading-indicator-bar-height; } + 3% { width: 91%; height: $v-loading-indicator-bar-height--wait; } + 100% { width: 96%; height: $v-loading-indicator-bar-height--wait; } +} + +@include keyframes(v-progress-wait-pulse) { + 0% { opacity: 1; } + 50% { opacity: .1; } + 100% { opacity: 1; } +} + + + +@mixin valo-loading-bar { + + .v-loading-indicator { + position: fixed !important; + z-index: 99999; + left: 0; + right: auto; + top: 0; + width: 50%; + opacity: 1; + height: $v-loading-indicator-bar-height; + background-color: $v-loading-indicator-color; + //@include linear-gradient(to right, rgba($v-loading-indicator-color,0) 0%, $v-loading-indicator-color 100%); + pointer-events: none; + + @include transition(none); + @include animation(v-progress-start 1000ms 200ms both); + //@include animation-fill-mode(forwards); + + &[style*="none"] { + // Chrome skips the transitions because it thinks the element is display: none; + display: block !important; + width: 100% !important; + opacity: 0; + @include animation(none); + @include transition(opacity 500ms 300ms, width 300ms); + } + } + + .v-loading-indicator-delay { + width: 90%; + .v-ff & { + width: 50%; + } + @include animation(v-progress-delay 3.8s forwards); + } + + .v-loading-indicator-wait { + width: 96%; + .v-ff & { + width: 90%; + } + @include animation(v-progress-wait 5s forwards, v-progress-wait-pulse 1s 4s infinite backwards); + } + +} diff --git a/WebContent/VAADIN/themes/valo/shared/_notification.scss b/WebContent/VAADIN/themes/valo/shared/_notification.scss new file mode 100644 index 0000000000..cfe4c19599 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/shared/_notification.scss @@ -0,0 +1,287 @@ +$v-notification-title-color: $v-focus-color !default; + + +@mixin valo-notification ($primary-stylename: v-Notification) { + + // Positional offsets + + .v-Notification { + &.v-position-top { + top: $v-layout-spacing-vertical; + } + + &.v-position-right { + right: $v-layout-spacing-horizontal; + } + + &.v-position-bottom { + bottom: $v-layout-spacing-vertical; + } + + &.v-position-left { + left: $v-layout-spacing-horizontal; + } + + &.v-position-assistive { + top: -9999px; + left: -9999px; + } + } + + // Custom animations for positions + + @if $v-animations-enabled { + + .#{$primary-stylename}-animate-in { + @include animation(valo-placeholder-animate-in 100ms, valo-anim-fade-in 100ms); + + &.v-position-left { + @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-right 200ms); + } + + &.v-position-right { + @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-left 200ms); + } + } + + .#{$primary-stylename}-animate-out { + @include animation(valo-placeholder-animate-out 150ms, valo-anim-fade-out 150ms); + + &.v-position-left, + &.v-position-right { + @include animation(valo-placeholder-animate-out 120ms, valo-anim-drop-fade-out 120ms); + } + } + } + + // Default style (a.k.a. humanized) + + .#{$primary-stylename} { + border-radius: $v-border-radius; + text-align: center; + position: fixed !important; + + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + + h1 { + margin: 0; + display: inline-block; + text-align: left; + font-weight: inherit; + line-height: inherit; + white-space: nowrap; + letter-spacing: 0; + } + + p { + margin: 0; + display: inline-block; + vertical-align: middle; + max-width: 30em; + text-align: left; + max-height: 20em; + overflow: auto; + } + + h1 ~ p { + margin-left: round($v-font-size * 1.5); + } + + .v-icon + h1 { + margin-left: round($v-font-size); + } + + @include valo-notification-style; + + } + + .#{$primary-stylename}-system { + @include valo-notification-bar-style; + @include valo-notification-system-style; + } + + .#{$primary-stylename}.tray { + text-align: left; + h1 { + //display: block; + } + + h1 + p { + display: block; + margin: .5em 0 0; + } + @include valo-notification-tray-style; + } + + .#{$primary-stylename}.warning { + @include valo-notification-warning-style; + } + + .#{$primary-stylename}.error { + @include valo-notification-error-style; + } +} + + + + +@mixin valo-notification-closable-style { + padding-right: $v-unit-size + round($v-unit-size/1.7); + overflow: hidden !important; // Override GWT PopupPanel + cursor: pointer; + + &:after { + content: "\00d7"; + font-size: 1.5em; + position: absolute; + top: 50%; + margin-top: round($v-unit-size/-3); + right: round($v-unit-size/3); + width: round($v-unit-size/1.5); + height: round($v-unit-size/1.5); + line-height: round($v-unit-size/1.5) - 1px; + cursor: pointer; + color: #000; + @include opacity(.5); + text-align: center; + border: first-number($v-border) solid #000; + border-color: rgba(0,0,0,.3); + border-radius: 50%; + @include transition(opacity 200ms); + } + + &:hover:after { + @include opacity(1); + } + + &:active:after { + background-color: #000; + color: #fff; + @include opacity(.3); + @include transition(none 200ms); + } +} + + + + + +@mixin valo-notification-style { + background: valo-overlay-background-color(); + @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.15)); + padding: round($v-unit-size/2) round($v-unit-size/1.7); + + h1 { + color: $v-notification-title-color; + font-size: round($v-font-size * 1.2); + line-height: 1; + } + p { + line-height: 1.4; + } +} + +@mixin valo-notification-bar-style { + left: 0 !important; + right: 0; + max-width: 100%; + margin: 0 !important; + border-radius: 0; + @include box-shadow(0 0 20px 0 rgba(0,0,0,0.25)); + padding: round($v-unit-size/3) round($v-unit-size/2.5); + + p { + max-width: 50em; + } + + &.v-position-top { + top: 0; + + @if $v-animations-enabled { + &.v-Notification-animate-in { + @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-down 200ms); + } + + &.v-Notification-animate-out { + @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-up 200ms); + } + } + } + + &.v-position-bottom { + bottom: 0; + + @if $v-animations-enabled { + &.v-Notification-animate-in { + @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-up 200ms); + } + + &.v-Notification-animate-out { + @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-down 200ms); + } + } + } +} + +@mixin valo-notification-system-style { + background-color: #444; + background-color: rgba(#444, .9); + font-weight: $v-font-weight + 100; + line-height: round($v-font-size * 1.4); + + h1 { + color: #fff; + vertical-align: middle; + } + + p { + color: #e6e6e6; + } + + // No need to underline the "click here" text, let's imply that the whole banner is clickable + u { + text-decoration: none; + } +} + +@mixin valo-notification-tray-style {} + +@mixin valo-notification-warning-style { + background: #FFF3D2; + + h1 { + color: #AC7C00; + } + + p { + color: #9D874D; + } +} + +@mixin valo-notification-error-style { + background: $v-error-indicator-color; + font-weight: $v-font-weight + 100; + @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.25)); + + h1 { + color: valo-font-color($v-error-indicator-color, 1); + } + + p { + color: valo-font-color($v-error-indicator-color, .8); + } +} + +@mixin valo-notification-small-style { + padding: round($v-unit-size/3.3) round($v-unit-size/2.8); + + h1 { + font-size: $v-font-size; + } + p { + font-size: round($v-font-size * 0.85); + } +} diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss new file mode 100644 index 0000000000..a5f6e36957 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss @@ -0,0 +1,210 @@ +@function valo-overlay-background-color ($context: $v-background-color) { + @if is-dark-color($context) { + @return darken($context, 3%); + } + @return lighten($context, 2%); +} + + +$v-overlay-background-color: valo-overlay-background-color() !default; +$v-overlay-border-radius: $v-border-radius !default; +$v-overlay-border-width: first-number($v-border) !default; + +$v-overlay-animate-in: valo-overlay-animate-in 120ms !default; +$v-overlay-animate-out: valo-placeholder-animate-out 120ms, valo-anim-fade-out 120ms !default; + +$v-overlay-padding: round($v-unit-size/9) !default; +$v-overlay-padding-vertical: $v-overlay-padding !default; +$v-overlay-padding-horizontal: $v-overlay-padding !default; + +$v-overlay-shadow: 0 4px 10px 0 (v-shade 2), 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade (2.5 - color-luminance($v-background-color)/255 + $v-bevel-depth/100%)) !default; + +$v-selection-overlay-background-color: $v-overlay-background-color !default; +$v-selection-overlay-padding: $v-overlay-padding !default; +$v-selection-overlay-padding-vertical: $v-selection-overlay-padding !default; +$v-selection-overlay-padding-horizontal: $v-selection-overlay-padding !default; + +$v-selection-item-border-radius: $v-border-radius - 1px !default; +$v-selection-item-height: ceil($v-unit-size/1.4) !default; +$v-selection-item-padding-horizontal: ceil($v-unit-size/4) !default; +$v-selection-item-font-weight: max(400, $v-font-weight); +$v-selection-item-selection-color: $v-selection-color !default; + + + + + + +@mixin valo-ie8-shadow($shadow, $element: top) { + .#{$element} { + $shadow-offset-x: nth($shadow, 1); + $shadow-offset-y: nth($shadow, 2); + $shadow-blur: nth($shadow, 3); + $shadow-spread: 0; + @if length($shadow) > 4 { + $shadow-spread: nth($shadow, 4); + } + $shadow-color: last($shadow); + $shadow-color-opacity: round(opacity($shadow-color) * 100); + $shadow-color: opacify($shadow-color, 1); + + position: absolute; + top: $shadow-offset-y - $shadow-blur - $shadow-spread; + right: -$shadow-offset-x + $shadow-blur - $shadow-spread; + bottom: -$shadow-offset-y + $shadow-blur - $shadow-spread; + left: $shadow-offset-x - $shadow-blur - $shadow-spread; + background: $shadow-color; + filter: alpha(opacity=#{$shadow-color-opacity}) progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=false); + } +} + + + + + +// Not needed in modern browsers +.v-shadow, +.v-shadow-window { + display: none; + + // In IE8 windows get the same shadow as other overlays + .v-ie8 & { + display: block; + + // Up to 8 shadows are supported + $elements: top, top-left, top-right, left, right, bottom, bottom-left, bottom-right; + $shadows: valo-bevel-and-shadow($shadow: $v-overlay-shadow); + + @if type-of(last($shadows)) == color { + @include valo-ie8-shadow($shadows); + } @else { + @for $i from 1 through min(length($elements), length($shadows)) { + $shadow: nth($shadows, $i); + @if length($shadow) == 2 { + $shadow: flatten-list($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list + } + @if length($shadow) > 3 { + @include valo-ie8-shadow($shadow: $shadow, $element: nth($elements, $i)); + } + } + } + } +} + + + + + + + + +@mixin valo-overlay-style ( + $background-color: $v-overlay-background-color, + $shadow: $v-overlay-shadow, + $animate-in: $v-overlay-animate-in, + $animate-out: $v-overlay-animate-out + ) { + padding: $v-overlay-padding-vertical $v-overlay-padding-horizontal; + border-radius: $v-overlay-border-radius; + + background-color: $background-color; + color: valo-font-color($background-color); + + @include box-shadow( valo-bevel-and-shadow($bevel: null, $shadow: $shadow)); + + @if $v-animations-enabled { + @if $animate-in { + &[class*="animate-in"] { + @include animation($animate-in); + } + } + @if $animate-out { + &[class*="animate-out"] { + @include animation($animate-out); + } + } + } + + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; +} + + + + + + +@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $animate-in: $v-overlay-animate-in, $animate-out: $v-overlay-animate-out) { + @include valo-overlay-style($background-color: $background-color, $animate-in: $animate-in, $animate-out: $animate-out); + padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal; +} + + + + +@mixin valo-selection-item-style { + cursor: pointer; + line-height: $v-selection-item-height; + padding: 0 $v-selection-item-padding-horizontal*2 0 $v-selection-item-padding-horizontal; + @if $v-selection-item-border-radius > 0 { + border-radius: $v-selection-item-border-radius; + } + font-weight: $v-selection-item-font-weight; + white-space: nowrap; + + position: relative; + &:active:before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + $sat: if(saturation($v-selection-item-selection-color) > 0, 50%, 0%); + background: scale-color($v-selection-item-selection-color, $lightness: -30%, $saturation: $sat); + @include opacity(.15); + pointer-events: none; + border-radius: inherit; + } + + .v-icon { + max-height: $v-selection-item-height; + margin-right: round($v-selection-item-padding-horizontal/2); + min-width: 1em; + } +} + + + + +@mixin valo-selection-item-selected-style { + @include valo-gradient($v-selection-item-selection-color); + color: valo-font-color($v-selection-item-selection-color, 0.9); +} + + + + + + + + +@mixin valo-drag-element { + .v-drag-element { + @include valo-drag-element-style; + } +} + +@mixin valo-drag-element-style ($background-color: $v-app-background-color) { + background: $background-color; + color: valo-font-color($background-color); + @include box-shadow(0 2px 10px rgba(#000, .2)); + border-radius: $v-border-radius; + overflow: hidden; + @include opacity(.5); + + // This has the unfortunate side-effect of selecting an the table row where the drag is dropped + //pointer-events: none; +} diff --git a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss new file mode 100644 index 0000000000..7b7b83ff33 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss @@ -0,0 +1,68 @@ +// @category Tooltip + +$v-tooltip-background-color: rgba(if(is-dark-color($v-background-color), scale-color($v-background-color, $lightness: 80%), scale-color($v-background-color, $lightness: -80%)), .9) !default; +$v-tooltip-font-color: valo-font-color(opacify($v-tooltip-background-color, 1), 1) !default; +$v-tooltip-font-size: max(12px, round($v-font-size * 0.86)) !default; +$v-tooltip-box-shadow: 0 2px 12px rgba(#000, .2) !default; +$v-tooltip-padding-vertical: round($v-unit-size/8) !default; +$v-tooltip-padding-horizontal: round($v-unit-size/4) !default; +$v-tooltip-error-message-background-color: #fff !default; +$v-tooltip-error-message-font-color: $v-error-indicator-color !default; +$v-tooltip-border-radius: $v-border-radius - 1px !default; + + +@mixin valo-tooltip { + .v-tooltip { + @include valo-tooltip-style; + + div[style*="width"] { + width: auto !important; + } + + .v-errormessage { + background-color: opacify($v-tooltip-error-message-background-color, 1); + background-color: $v-tooltip-error-message-background-color; + color: $v-tooltip-error-message-font-color; + margin: -$v-tooltip-padding-vertical #{-$v-tooltip-padding-horizontal}; + padding: $v-tooltip-padding-vertical $v-tooltip-padding-horizontal; + max-height: 10em; + overflow: auto; + font-weight: $v-font-weight + 100; + + h2:only-child { + font: inherit; + line-height: inherit; + } + } + + .v-tooltip-text { + max-height: 10em; + overflow: auto; + margin-top: $v-tooltip-padding-vertical * 2; + } + + .v-errormessage[aria-hidden="true"] + .v-tooltip-text { + margin-top: 0; + } + + h1, + h2, + h3, + h4 { + color: inherit; + } + } +} + + +@mixin valo-tooltip-style { + background-color: opacify($v-tooltip-background-color, 1); // For IE8 + background-color: $v-tooltip-background-color; + @include box-shadow($v-tooltip-box-shadow); + color: $v-tooltip-font-color; + padding: $v-tooltip-padding-vertical $v-tooltip-padding-horizontal; + border-radius: $v-tooltip-border-radius; + max-width: 35em; + overflow: hidden !important; + font-size: $v-tooltip-font-size; +} diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss new file mode 100644 index 0000000000..8adc3667d3 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss @@ -0,0 +1,132 @@ +// @category Common + +// Color functions are used to calculate default font color +@import "../util/color"; + + +// List of components to include in the theme compilation. The list can be modified to make +// the compiled theme smaller by removing unused components from the list. +// +// @usage +// // Remove the Calendar component styles from the output +// $v-included-components: remove($v-included-components, calendar); +$v-included-components: + absolutelayout, + accordion, + button, + calendar, + checkbox, + colorpicker, + combobox, + csslayout, + customcomponent, + customlayout, + datefield, + dragwrapper, + form, + formlayout, + grid, + gridlayout, + label, + link, + menubar, + nativebutton, + nativeselect, + notification, + optiongroup, + orderedlayout, + panel, + popupview, + progressbar, + slider, + splitpanel, + table, + tabsheet, + textfield, + textarea, + richtextarea, + tree, + treetable, + twincolselect, + upload, + window !default; + + +// Checks if a given component is included in the compilation. Used by the collection mixins that +// include all components, like valo-components and valo-components. +// @param $component-name {String} the name of the component to check +// @param $is-included {list} (Optional) the list of components which is checked +// @return {Boolean} true if the component is included in the compilation, false if not +@function v-is-included ($component-name, $is-included: $v-included-components) { + @return contains($is-included, $component-name); +} + + +// A static text that is shown while the application JavaScript is loaded and started +$v-app-loading-text : "" !default; + + +// Base line height used for all widgets +$v-line-height : 1.55 !default; + + +$v-background-color : hsl(210, 0%, 98%) !default; +$v-app-background-color : $v-background-color !default; + +$v-font-size : 16px !default; // Should be specified in pixels +$v-font-weight : 300 !default; // Must be specified as a numeric value (i.e. not 'normal' or 'bold') +$v-font-color : valo-font-color($v-app-background-color) !default; +$v-font-family : "Open Sans", sans-serif !default; + +$v-caption-font-size : round($v-font-size * 0.9) !default; // Should be a pixel value +$v-caption-font-weight : max(400, $v-font-weight) !default; + +$v-unit-size : round(2.3 * $v-font-size) !default; // Must be specified in pixels (suitable range 18-50) + +$v-layout-margin-top : round($v-unit-size) !default; +$v-layout-margin-right : round($v-unit-size) !default; +$v-layout-margin-bottom : round($v-unit-size) !default; +$v-layout-margin-left : round($v-unit-size) !default; + +$v-layout-spacing-vertical : round($v-unit-size/3) !default; +$v-layout-spacing-horizontal : round($v-unit-size/3) !default; + +$v-border : 1px solid (v-shade 0.7) !default; // Size must be specified in pixels +$v-border-radius : 4px !default; // Must be specified in pixels + +$v-gradient : v-linear 8% !default; + +$v-bevel : inset 0 1px 0 v-tint, inset 0 -1px 0 v-shade !default; +$v-bevel-depth : 30% !default; + +$v-shadow : 0 2px 3px v-shade !default; +$v-shadow-opacity : 5% !default; + +$v-focus-color : valo-focus-color() !default; +$v-focus-style : 0 0 0 2px rgba($v-focus-color, .5) !default; + +$v-animations-enabled : true !default; +$v-hover-styles-enabled : true !default; + +$v-disabled-opacity : 0.5 !default; + +$v-selection-color : $v-focus-color !default; + +$v-default-field-width : $v-unit-size * 5 !default; + +$v-error-indicator-color : #ed473b !default; +$v-required-field-indicator-color : $v-error-indicator-color !default; + + + + +$valo-include-common-stylenames : true !default; + + + + +// A flag to note whether relative URL paths are relative to the currently parsed SCSS file or to the compilation root file. +// The Vaadin compiler parses URL paths differently than the regular Sass compiler (i.e. Vaadin modifies relative url paths). +// This boolean is used to flag which compiler is used, so that paths are correct for different resources. +// false == Ruby, true == Vaadin +$v-relative-paths: true !default; diff --git a/WebContent/VAADIN/themes/valo/shared/img/spinner.gif b/WebContent/VAADIN/themes/valo/shared/img/spinner.gif Binary files differnew file mode 100644 index 0000000000..acf8f1c43a --- /dev/null +++ b/WebContent/VAADIN/themes/valo/shared/img/spinner.gif diff --git a/WebContent/VAADIN/themes/valo/styles.scss b/WebContent/VAADIN/themes/valo/styles.scss new file mode 100644 index 0000000000..5760440179 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/styles.scss @@ -0,0 +1,5 @@ +@import "valo"; + +.valo { + @include valo; +} diff --git a/WebContent/VAADIN/themes/valo/util/_anim.scss b/WebContent/VAADIN/themes/valo/util/_anim.scss new file mode 100644 index 0000000000..430a6e4722 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/_anim.scss @@ -0,0 +1,115 @@ +@if $v-animations-enabled { + + // 'Placeholder' animation names to trigger VOverlay animation-in and animation-out + @include keyframes(valo-placeholder-animate-in) { + 0% { + visibility: visible; + } + } + + @include keyframes(valo-placeholder-animate-out) { + 100% { + visibility: visible; + } + } + + @include keyframes(valo-anim-fade-in) { + 0% { + opacity: 0; + } + } + + @include keyframes(valo-anim-fade-out) { + 100% { + opacity: 0; + } + } + + @include keyframes(valo-anim-slide-in-down) { + 0% { + @include transform( translateY(-100%) ); + } + } + + @include keyframes(valo-anim-slide-in-up) { + 0% { + @include transform( translateY(100%) ); + } + } + + @include keyframes(valo-anim-slide-in-left) { + 0% { + @include transform( translateX(100%) ); + } + } + + @include keyframes(valo-anim-slide-in-right) { + 0% { + @include transform( translateX(-100%) ); + } + } + + @include keyframes(valo-anim-slide-out-down) { + 100% { + @include transform( translateY(100%) ); + } + } + + @include keyframes(valo-anim-slide-out-up) { + 100% { + @include transform( translateY(-100%) ); + } + } + + @include keyframes(valo-anim-slide-out-left) { + 100% { + @include transform( translateX(-100%) ); + } + } + + @include keyframes(valo-anim-slide-out-right) { + 100% { + @include transform( translateX(100%) ); + } + } + + @include keyframes(valo-overlay-animate-in) { + 0% { + @include transform(translatey(-4px)); + opacity: 0; + } + } + + @include keyframes(valo-anim-drop-fade-out) { + 100% { + opacity: 0; + @include transform(translatey(30%)); + } + } + +} + + +@mixin valo-anim-fade-in ($duration: 120ms, $delay: null){ + @include animation(valo-anim-fade-in $duration $delay); +} + +@mixin valo-anim-fade-out ($duration: 120ms, $delay: null){ + @include animation(valo-anim-fade-out $duration $delay); +} + +@mixin valo-anim-slide-down ($duration: 260ms, $delay: null){ + @include animation(valo-anim-slide-down $duration $delay); +} + +@mixin valo-anim-slide-up ($duration: 260ms, $delay: null){ + @include animation(valo-anim-slide-up $duration $delay); +} + +@mixin valo-anim-slide-left ($duration: 260ms, $delay: null){ + @include animation(valo-anim-slide-left $duration $delay); +} + +@mixin valo-anim-slide-right ($duration: 260ms, $delay: null){ + @include animation(valo-anim-slide-right $duration $delay); +} diff --git a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss new file mode 100644 index 0000000000..bf5b9b78bd --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss @@ -0,0 +1,231 @@ +@function valo-border($border: $v-border, $color: $v-background-color, $context: null, $strength: 1) { + @if type-of($border) != list { + @return $border; + } + + @if $context { + @if color-luminance($color) > color-luminance($context) { + $color: $context; + } + } + + $ret: null; + @each $part in $border { + @if $part == v-tint or $part == v-shade or $part == v-tone { + $part: $part 1; + } + @if type-of($part) == list { + $adjust-type: first-string($part); + $adjust-amount: first-number($part); + + $tint: blend-screen(white($v-bevel-depth/100%*$adjust-amount*$strength), $color); + $shade: blend-linearburn(black($v-bevel-depth/100%*$adjust-amount*$strength), $color); + + @if $adjust-type == v-tone { + @if is-dark-color($color) { + $color: $tint; + } @else { + $color: $shade; + } + } @else if $adjust-type == v-tint { + $color: $tint; + } @else if $adjust-type == v-shade { + $color: $shade; + } + + $ret: $ret $color; + } @else { + $ret: $ret $part; + } + } + @return $ret; +} + + +@mixin valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient) { + border: valo-border($border, $color); + + // Adjust border-colors for gradient + @if $gradient { + $color-stops: valo-gradient-color-stops($color, $gradient); + $top: first(first($color-stops)); + $bottom: first(last($color-stops)); + border-top-color: first-color(valo-border($border, $top)); + border-bottom-color: first-color(valo-border($border, $bottom)); + } +} + + + + +@function valo-bevel-and-shadow ($bevel: null, $bevel-depth: $v-bevel-depth, $shadow: null, $shadow-opacity: $v-shadow-opacity, $background-color: $v-background-color, $gradient: null, $include-focus: false) { + $box-shadow: null; + + @if $bevel { + @if list-of-lists($bevel) { + @each $b in $bevel { + $this: valo-bevel-and-shadow($bevel: $b, $shadow: null, $background-color: $background-color, $gradient: $gradient); + @if $this { + @if length($box-shadow) > 0 { + $box-shadow: $box-shadow, $this; + } @else { + $box-shadow: $this; + } + } + } + } @else if $bevel and $bevel != none { + $this: valo-replace-tones($bevel, $background-color, $gradient); + @if $this { + @if length($box-shadow) > 0 { + $box-shadow: $box-shadow, $this; + } @else { + $box-shadow: $this; + } + } + } + } + + @if $shadow { + @if list-of-lists($shadow) { + @each $s in $shadow { + $this: valo-bevel-and-shadow($bevel: null, $shadow: $s, $background-color: null, $gradient: null); + @if $this { + @if length($box-shadow) > 0 { + $box-shadow: $box-shadow, $this; + } @else { + $box-shadow: $this; + } + } + } + } @else { + $this: valo-replace-shadow($shadow); + @if $this { + @if length($box-shadow) > 0 { + $box-shadow: $box-shadow, $this; + } @else { + $box-shadow: $this; + } + } + } + } + + @if $include-focus and type-of($v-focus-style) == list { + $box-shadow: $v-focus-style, $box-shadow; + } + + @return $box-shadow; +} + + + +@function valo-replace-tones($list, $tint-color, $gradient: null, $shade-color: null) { + $shade-color: $shade-color or $tint-color; + $ret: (); + + @each $part in $list { + @if $part == v-tint or $part == v-shade or $part == v-tone { + $part: $part 1; + } + @if type-of($part) == list { + $adjust-type: first-string($part); + $adjust-amount: first-number($part); + + $top-color: $tint-color; + $bottom-color: $shade-color; + + @if $gradient { + $color-stops: valo-gradient-color-stops($tint-color, $gradient); + $top-color: first(first($color-stops)); + $bottom-color: first(last($color-stops)); + } + + $tint: blend-lighten(adjust-color($top-color, $lightness: $v-bevel-depth/4*$adjust-amount, $saturation: -$v-bevel-depth/2), scale-color($top-color, $lightness: $v-bevel-depth/4*$adjust-amount)); + $shade: blend-darken(rgba(scale-color($bottom-color, $lightness: max(-30%, -$v-bevel-depth/3*$adjust-amount), $saturation: -$v-bevel-depth/2), $v-bevel-depth/100%), $bottom-color); + + $color: null; + @if $adjust-type == v-tone { + @if is-dark-color($tint-color) { + $color: $tint; + } @else { + $color: $shade; + } + } @else if $adjust-type == v-tint { + $color: $tint; + } @else if $adjust-type == v-shade { + $color: $shade; + } + + $ret: join($ret, $color); + + } @else { + $ret: join($ret, $part); + } + } + + @return $ret; +} + + +@function valo-replace-shadow ($shadow) { + $ret: (); + @each $part in $shadow { + @if $part == v-tint or $part == v-shade { + $part: $part 1; + } + @if type-of($part) == list { + $adjust-type: first-string($part); + $adjust-amount: first-number($part); + + $tint: rgba(#fff, min(1, $v-shadow-opacity/100% * $adjust-amount)); + $shade: rgba(#000, min(1, $v-shadow-opacity/100% * $adjust-amount)); + + $color: null; + @if $adjust-type == v-tint { + $color: $tint; + } @else if $adjust-type == v-shade { + $color: $shade; + } + + $ret: join($ret, $color); + + } @else { + $ret: join($ret, $part); + } + } + @return $ret; +} + + +@function valo-text-shadow($font-color: $v-font-color, $background-color: $v-background-color, $bevel: $v-bevel, $offset: 1px) { + @if type-of($bevel) != list or $v-bevel-depth == 0 { + @return null; + } + + $needle: null; + @if color-luminance($font-color) < color-luminance($background-color) { + // Text darker than bg, light shadow. Look for tint + $needle: v-tint; + } @else { + // Text lighter than bg, dark shadow. Look for shade + $needle: v-shade; + } + + // Use the first match from the bevel list + @while list-of-lists($bevel) { + $bevel: first($bevel); + } + + // Remove possible 'inset' + $bevel: remove($bevel, inset); + + $color: $background-color; + @each $b in $bevel { + $strength: 1; + @if type-of($b) == list { + $strength: first-number($b); + } + $color: if($needle==v-tint, rgba(#fff, $v-shadow-opacity/100%*$strength), rgba(#000, $v-shadow-opacity/100%*$strength)); + } + + @return 0 if($needle==v-tint, $offset, $offset*-1) 0 $color; +} diff --git a/WebContent/VAADIN/themes/valo/util/_blend-modes.scss b/WebContent/VAADIN/themes/valo/util/_blend-modes.scss new file mode 100644 index 0000000000..3da575660d --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/_blend-modes.scss @@ -0,0 +1,532 @@ +// From https://github.com/heygrady/scss-blend-modes +// MIT license +// Remember to add a license notice to Vaadin + +//-------------------------------- +// Normal +//-------------------------------- +@function blend-normal ($foreground, $background) { + $opacity: opacity($foreground); + $background-opacity: opacity($background); + + // calculate opacity + $bm-red: red($foreground) * $opacity + red($background) * $background-opacity * (1 - $opacity); + $bm-green: green($foreground) * $opacity + green($background) * $background-opacity * (1 - $opacity); + $bm-blue: blue($foreground) * $opacity + blue($background) * $background-opacity * (1 - $opacity); + @return rgb($bm-red, $bm-green, $bm-blue); +} + +//-------------------------------- +// Multiply +//-------------------------------- +@function blend-multiply ($foreground, $background) { + $bm-red: red($background) * red($foreground) / 255; + $bm-green: green($background) * green($foreground) / 255; + $bm-blue: blue($background) * blue($foreground) / 255; + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} + +//-------------------------------- +// Lighten +//-------------------------------- +@function blend-lighten ($foreground, $background) { + $bm-red: blend-lighten-color(red($foreground), red($background)); + $bm-green: blend-lighten-color(green($foreground), green($background)); + $bm-blue: blend-lighten-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} +@function blend-lighten-color($foreground, $background) { + @if $background > $foreground { + $foreground: $background; + } + @return $foreground; +} + +//-------------------------------- +// Darken +//-------------------------------- +@function blend-darken ($foreground, $background) { + $bm-red: blend-darken-color(red($foreground), red($background)); + $bm-green: blend-darken-color(green($foreground), green($background)); + $bm-blue: blend-darken-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} +@function blend-darken-color($foreground, $background) { + @if $background < $foreground { + $foreground: $background; + } + @return $foreground; +} + +//-------------------------------- +// Darker Color +//-------------------------------- +@function blend-darkercolor ($foreground, $background) { + $bm-red: red($foreground); + $bm-green: green($foreground); + $bm-blue: blue($foreground); + $background-red: red($background); + $background-green: green($background); + $background-blue: blue($background); + + @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 <= $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 { + $bm-red: $background-red; + $bm-green: $background-green; + $bm-blue: $background-blue; + } + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} + +//-------------------------------- +// Lighter Color +//-------------------------------- +@function blend-lightercolor ($foreground, $background) { + $bm-red: red($foreground); + $bm-green: green($foreground); + $bm-blue: blue($foreground); + $background-red: red($background); + $background-green: green($background); + $background-blue: blue($background); + + @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 > $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 { + $bm-red: $background-red; + $bm-green: $background-green; + $bm-blue: $background-blue; + } + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} + +//-------------------------------- +// Linear Dodge +//-------------------------------- +@function blend-lineardodge ($foreground, $background) { + $bm-red: blend-lineardodge-color(red($foreground), red($background)); + $bm-green: blend-lineardodge-color(green($foreground), green($background)); + $bm-blue: blend-lineardodge-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} +@function blend-lineardodge-color($foreground, $background) { + @if $background + $foreground > 255 { + $foreground: 255; + } + @else { + $foreground: $background + $foreground; + } + @return $foreground; +} + +//-------------------------------- +// Linear Burn +//-------------------------------- +@function blend-linearburn ($foreground, $background) { + $bm-red: blend-linearburn-color(red($foreground), red($background)); + $bm-green: blend-linearburn-color(green($foreground), green($background)); + $bm-blue: blend-linearburn-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} +@function blend-linearburn-color($foreground, $background) { + @if $background + $foreground < 255 { + $foreground: 0; + } + @else { + $foreground: $background + $foreground - 255; + } + @return $foreground; +} + +//-------------------------------- +// Difference +//-------------------------------- +@function blend-difference ($foreground, $background) { + $bm-red: abs(red($background) - red($foreground)); + $bm-green: abs(green($background) - green($foreground)); + $bm-blue: abs(blue($background) - blue($foreground)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} + +//-------------------------------- +// Screen +//-------------------------------- +@function blend-screen ($foreground, $background) { + $bm-red: blend-screen-color(red($foreground), red($background)); + $bm-green: blend-screen-color(green($foreground), green($background)); + $bm-blue: blend-screen-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} +@function blend-screen-color($foreground, $background) { + @return (255 - ( ( (255 - $foreground) * (255 - $background)) / 256)); +} + +//-------------------------------- +// Exclusion +//-------------------------------- +@function blend-exclusion ($foreground, $background) { + $bm-red: blend-exclusion-color(red($foreground), red($background)); + $bm-green: blend-exclusion-color(green($foreground), green($background)); + $bm-blue: blend-exclusion-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} +@function blend-exclusion-color($foreground, $background) { + @return $background - ($background * (2 / 255) - 1) * $foreground; +} + +//-------------------------------- +// Overlay +//-------------------------------- +@function blend-overlay ($foreground, $background) { + $bm-red: blend-overlay-color(red($foreground), red($background)); + $bm-green: blend-overlay-color(green($foreground), green($background)); + $bm-blue: blend-overlay-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} +@function blend-overlay-color($foreground, $background) { + @if $background <= 255 / 2 { + $foreground: (2 * $background * $foreground) / 255; + } @else { + $foreground: 255 - (255 - 2 * ($background - (255 / 2))) * (255 - $foreground) / 255; + } + @return $foreground; +} + +//-------------------------------- +// Soft Light +//-------------------------------- +@function blend-softlight ($foreground, $background) { + $bm-red: blend-softlight-color(red($foreground), red($background)); + $bm-green: blend-softlight-color(green($foreground), green($background)); + $bm-blue: blend-softlight-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} +@function blend-softlight-color($foreground, $background) { + @if $background < 128 { + $foreground: (($foreground / 2) + 64) * $background * (2 / 255); + } @else { + $foreground: 255 - (191 - ($foreground / 2)) * (255 - $background) * (2 / 255); + } + @return $foreground; +} + +//-------------------------------- +// Hard Light +//-------------------------------- +@function blend-hardlight ($foreground, $background) { + $bm-red: blend-hardlight-color(red($foreground), red($background)); + $bm-green: blend-hardlight-color(green($foreground), green($background)); + $bm-blue: blend-hardlight-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} +@function blend-hardlight-color($foreground, $background) { + $tmp-blend: $foreground; + @if $tmp-blend < 128 { + $foreground: $background * $tmp-blend * (2 / 255); + } @else { + $foreground: 255 - (255-$background) * (255-$tmp-blend) * (2 / 255); + } + @return $foreground; +} + +//-------------------------------- +// Color Dodge +//-------------------------------- +@function blend-colordodge ($foreground, $background) { + $bm-red: blend-colordodge-color(red($foreground), red($background)); + $bm-green: blend-colordodge-color(green($foreground), green($background)); + $bm-blue: blend-colordodge-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} +@function blend-colordodge-color($foreground, $background) { + $tmp: $background * 256 / (255 - $foreground); + @if $tmp > 255 or $foreground == 255 { + $foreground: 255; + } @else { + $foreground: $tmp; + } + @return $foreground; +} + +//-------------------------------- +// Color Burn +//-------------------------------- +@function blend-colorburn ($foreground, $background) { + $bm-red: blend-colorburn-color(red($foreground), red($background)); + $bm-green: blend-colorburn-color(green($foreground), green($background)); + $bm-blue: blend-colorburn-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} +@function blend-colorburn-color($foreground, $background) { + $tmp: (255 - ((255 - $background) * 255) / $foreground); + + // TODO: hacked to replicate photoshop + @if $foreground == 0 { + $foreground: 255; + } @elseif $tmp < 0 { + $foreground: 0; + } @else { + $foreground: $tmp; + } + @return $foreground; +} + +//-------------------------------- +// Linear Light +//-------------------------------- +@function blend-linearlight ($foreground, $background) { + $bm-red: blend-linearlight-color(red($foreground), red($background)); + $bm-green: blend-linearlight-color(green($foreground), green($background)); + $bm-blue: blend-linearlight-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} +@function blend-linearlight-color($foreground, $background) { + @if $foreground < 128 { + $foreground: blend-linearburn-color($background, 2 * $foreground); + } @else { + $foreground: blend-lineardodge-color($background, 2 * ($foreground - 128)); + } + @return $foreground; +} + +//-------------------------------- +// Vivid Light +//-------------------------------- +@function blend-vividlight ($foreground, $background) { + $bm-red: blend-vividlight-color(red($foreground), red($background)); + $bm-green: blend-vividlight-color(green($foreground), green($background)); + $bm-blue: blend-vividlight-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} + +@function blend-vividlight-color($foreground, $background) { + @if $foreground < 128 { + $foreground: blend-colorburn-color(2 * $foreground, $background); + } @else { + $foreground: blend-colordodge-color(2 * ($foreground - 128), $background); + } + @return $foreground; +} + +//-------------------------------- +// Pin Light +//-------------------------------- +@function blend-pinlight ($foreground, $background) { + $bm-red: blend-pinlight-color(red($foreground), red($background)); + $bm-green: blend-pinlight-color(green($foreground), green($background)); + $bm-blue: blend-pinlight-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} + +@function blend-pinlight-color($foreground, $background) { + @if $foreground < 128 { + $foreground: blend-darken-color($background, 2 * $foreground); + } @else { + $foreground: blend-lighten-color($background, 2 * ($foreground - 128)); + } + @return $foreground; +} + +//-------------------------------- +// Hard Mix +//-------------------------------- +@function blend-hardmix ($foreground, $background) { + $bm-red: blend-hardmix-color(red($foreground), red($background)); + $bm-green: blend-hardmix-color(green($foreground), green($background)); + $bm-blue: blend-hardmix-color(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} + +@function blend-hardmix-color($foreground, $background) { + $tmp: blend-vividlight-color($foreground, $background); + @if $tmp < 128 { + $foreground: 0; + } @else { + $foreground: 255; + } + @return $foreground; +} + + +// Unique to Photoshop + +//-------------------------------- +// Color Blend +//-------------------------------- +@function blend-colorblend ($foreground, $background) { + $foreground-hsv: color-to-hsv($foreground); + $background-hsv: color-to-hsv($background); + + $bm-hsv: nth($foreground-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3); + $bm-color: hsv-to-color($bm-hsv); + + @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background); +} + +//-------------------------------- +// Dissolve +//-------------------------------- +@function blend-dissolve ($foreground, $background) { + // The Dissolve blend mode acts on transparent and partially transparent pixels + // it treats transparency as a pixel pattern and applies a diffusion dither pattern. + // @see http://photoblogstop.com/photoshop/photoshop-blend-modes-explained + @return $foreground; +} + +//-------------------------------- +// Divide +//-------------------------------- +@function blend-divide ($foreground, $background) { + $bm-red: blend-divide-colors(red($foreground), red($background)); + $bm-green: blend-divide-colors(green($foreground), green($background)); + $bm-blue:blend-divide-colors(blue($foreground), blue($background)); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} +@function blend-divide-colors($foreground, $background) { + @return min((($background / 255) / ($foreground / 255)) * 255, 255); +} + +//-------------------------------- +// Hue +//-------------------------------- +@function blend-hue ($foreground, $background) { + $foreground-hsv: color-to-hsv($foreground); + $background-hsv: color-to-hsv($background); + + $bm-hsv: nth($foreground-hsv, 1), nth($background-hsv, 2), nth($background-hsv, 3); + $bm-color: hsv-to-color($bm-hsv); + + @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background); +} + +//-------------------------------- +// Luminosity +//-------------------------------- +@function blend-luminosity ($foreground, $background) { + $foreground-hsv: color-to-hsv($foreground); + $background-hsv: color-to-hsv($background); + + $bm-hsv: nth($background-hsv, 1), nth($background-hsv, 2), nth($foreground-hsv, 3); + $bm-color: hsv-to-color($bm-hsv); + + @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background); +} + +//-------------------------------- +// Saturation +//-------------------------------- +@function blend-saturation ($foreground, $background) { + $foreground-hsv: color-to-hsv($foreground); + $background-hsv: color-to-hsv($background); + + $bm-hsv: nth($background-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3); + $bm-color: hsv-to-color($bm-hsv); + + @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background); +} + +//-------------------------------- +// Subtract +//-------------------------------- +@function blend-subtract ($foreground, $background) { + $bm-red: max(red($background) - red($foreground), 0); + $bm-green: max(green($background) - green($foreground), 0); + $bm-blue: max(blue($background) - blue($foreground), 0); + + @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background); +} + +//-------------------------------- +// HSL and HSV +//-------------------------------- +// @see https://gist.github.com/1069204 +@function hsv-to-hsl($h, $s: 0, $v: 0) { + @if type-of($h) == 'list' { + $v: nth($h, 3); + $s: nth($h, 2); + $h: nth($h, 1); + } + + @if unit($h) == 'deg' { + $h: 3.1415 * 2 * ($h / 360deg); + } + @if unit($s) == '%' { + $s: 0 + ($s / 100%); + } + @if unit($v) == '%' { + $v: 0 + ($v / 100%); + } + + $ss: $s * $v; + $ll: (2 - $s) * $v; + + @if $ll <= 1 { + $ss: $ss / $ll; + } @else if ($ll == 2) { + $ss: 0; + } @else { + $ss: $ss / (2 - $ll); + } + + $ll: $ll / 2; + + @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $ss))), percentage(max(0, min(1, $ll))); +} + +@function hsl-to-hsv($h, $ss: 0, $ll: 0) { + @if type-of($h) == 'list' { + $ll: nth($h, 3); + $ss: nth($h, 2); + $h: nth($h, 1); + } @else if type-of($h) == 'color' { + $ll: lightness($h); + $ss: saturation($h); + $h: hue($h); + } + + @if unit($h) == 'deg' { + $h: 3.1415 * 2 * ($h / 360deg); + } + @if unit($ss) == '%' { + $ss: 0 + ($ss / 100%); + } + @if unit($ll) == '%' { + $ll: 0 + ($ll / 100%); + } + + $ll: $ll * 2; + + @if $ll <= 1 { + $ss: $ss * $ll; + } @else { + $ss: $ss * (2 - $ll); + } + + $v: ($ll + $ss) / 2; + $s: (2 * $ss) / ($ll + $ss); + + @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $s))), percentage(max(0, min(1, $v))); +} + +@function color-to-hsv($color) { + @return hsl-to-hsv($color); +} + +@function hsv-to-color($h, $s: 0, $v: 0) { + $hsl: hsv-to-hsl($h, $s, $v); + @return hsl(nth($hsl, 1), nth($hsl, 2), nth($hsl, 3)); +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/util/_color.scss b/WebContent/VAADIN/themes/valo/util/_color.scss new file mode 100644 index 0000000000..0c80d2f0d0 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/_color.scss @@ -0,0 +1,95 @@ +// "Photoshop" blend modes +@import "blend-modes"; + +// Returns the luminance of a color (0-255) +// (perceived brightness, rather than absolute mathematical lightness value) +// +// "The luminance calculation is a weighted average of the color channels that approximates +// how humans perceive brightness, while lightness is just an average of the largest and +// smallest channels without regard to perception." +// +// Source for equation: http://en.wikipedia.org/wiki/Luminance_(relative) +@function color-luminance ($color) { + @return 0.2126 * red($color) + 0.7152 * green($color) + 0.0722 * blue($color); +} + + +// Arbitrary luminance threshold after which colors should be adjusted either darker or lighter +$v-luminance-threshold: 150 !default; + + + +@function black($opacity: 1) { + @return transparentize(#000, 1 - $opacity); +} + +@function white($opacity: 1) { + @return transparentize(#fff, 1 - $opacity); +} + + + +@function is-dark-color($bg-color) { + $luminance: color-luminance($bg-color); + @if $luminance < $v-luminance-threshold or (saturation($bg-color) > 80% and ($luminance < $v-luminance-threshold + 20)) { + @return true; + } @else { + @return false; + } +} + + +@function darkest-color($colors...) { + $darkest: first($colors); + @each $color in $colors { + @if color-luminance($color) < color-luminance($darkest) { + $darkest: $color; + } + } + @return $darkest; +} + +// Returns a text color with enough contrast for the given background color +@function valo-font-color ($bg-color, $contrast: 0.8) { + @if $bg-color { + @if is-dark-color($bg-color) { + @return scale-color($bg-color, $lightness: min(100%, 100% * $contrast), $saturation: max(-100%, -50% * $contrast)); + } @else { + @return scale-color($bg-color, $lightness: max(-100%, -100% * $contrast * 0.9), $saturation: max(-100%, -50% * $contrast)); + } + } + @return null; +} + + +@function valo-header-color ($bg-color, $contrast: 1) { + $font-color: valo-font-color($bg-color); + @if is-dark-color($bg-color) { + @return lighten($font-color, 30% * $contrast); + } @else { + @return darken($font-color, 20% * $contrast); + } +} + + + + +@function valo-focus-color ($context: $v-app-background-color) { + $color: $context; + @if is-dark-color($context) { + $color: scale-color($color, $lightness: 40%, $saturation: 80%); + } @else { + $color: scale-color($color, $lightness: -50%, $saturation: 80%); + } + @return $color; +} + + + +@mixin valo-focus-style($include-box-shadow: false) { + @if $include-box-shadow and type-of($v-focus-style) == list { + @include box-shadow($v-focus-style); + } @else if type-of($v-focus-style) == color { + border-color: $v-focus-style; + } +} diff --git a/WebContent/VAADIN/themes/valo/util/_css3.scss b/WebContent/VAADIN/themes/valo/util/_css3.scss new file mode 100644 index 0000000000..b1215d735f --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/_css3.scss @@ -0,0 +1,20 @@ +@mixin opacity ($value, $important: false) { + $importantValue: null; + @if $important { + $importantValue: unquote("!important"); + } + + opacity: $value $importantValue; + + @if $value < 1 { + $valueperc: $value*100; + filter: alpha(opacity=#{$valueperc}) #{$importantValue}; + } @else { + filter: none #{$importantValue}; + } +} + +// -webkit-box-shadow still needed for Android 2.3 and 3.0, as well as iOS 5 +@mixin box-shadow ($shadows...) { + @include prefixer(box-shadow, $shadows, webkit spec); +} diff --git a/WebContent/VAADIN/themes/valo/util/_gradient.scss b/WebContent/VAADIN/themes/valo/util/_gradient.scss new file mode 100644 index 0000000000..df159ad611 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/_gradient.scss @@ -0,0 +1,46 @@ +@mixin valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to bottom) { + @if $color { + @if $gradient { + $color-stops: valo-gradient-color-stops($color, $gradient); + @include linear-gradient($direction, $color-stops, $fallback: $fallback or $color); + } @else { + background: $fallback or $color; + } + } +} + +@function valo-gradient-color-stops($color, $gradient: $v-gradient) { + $style: valo-gradient-style($gradient); + $opacity: valo-gradient-opacity($gradient); + + @if $style != none and $opacity > 0 { + @if $style == v-linear or $style == v-linear-reverse { + $start: blend-overlay(rgba(#fff, $opacity/100%), $color); + $end: blend-overlay(rgba(#000, max(0, $opacity/100%)), $color); + $end: blend-multiply(rgba(#000, max(0, $opacity/200%)), $end); + + @if $style == v-linear { + @return $start 2%, $end 98%; + } @else { + @return $end 2%, $start 98%; + } + } + } + + @return $color 0%, $color 100%; +} + + +@function valo-gradient-style($gradient: $v-gradient) { + @if type-of($gradient) != list { + @return none; + } + @return first-string($gradient); +} + +@function valo-gradient-opacity($gradient: $v-gradient) { + @if type-of($gradient) != list { + @return 0%; + } + @return first-number($gradient); +} diff --git a/WebContent/VAADIN/themes/valo/util/_lists.scss b/WebContent/VAADIN/themes/valo/util/_lists.scss new file mode 100644 index 0000000000..54471b1380 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/_lists.scss @@ -0,0 +1,343 @@ +@function contains($list, $var, $recursive: false) { + @if $recursive == false { + @return (false != index($list, $var)); + } + + $ret: false; + @each $item in $list { + @if type-of($item) == list and $recursive { + @if contains($item, $var, true) { + @return true; + } + } @else if $item == $var { + @return true; + } + } + + @return false; +} + + +@function list-of-lists($list) { + @each $part in $list { + @if type-of($part) != list { + @return false; + } + } + @return true; +} + + +@function first-color($list) { + @return first-of-type($list, color); +} + + +@function first-number($list) { + @return first-of-type($list, number); +} + + +@function first-string($list) { + @return first-of-type($list, string); +} + + +@function first-list($list) { + @return first-of-type($list, list); +} + + +@function first-of-type($list, $type) { + @each $item in $list { + @if type-of($item) == $type { + @return $item; + } @else if type-of($item) == list { + $ret: first-of-type($item, $type); + @if $ret { + @return $ret; + } + } + } + @return null; +} + + +@function flatten-list($list) { + $ret: (); + @each $item in $list { + @if type-of($item) != list and $item != null { + $ret: join($ret, $item); + } @else if length($item) > 0 and $item != null { + $t: flatten-list($item); + @if length($t) > 0 { + $ret: join($ret, $t); + } + } + } + @return $ret; +} + + + + +// Author: Hugo Giraudel +// Repository: https://github.com/Team-Sass/Sass-list-functions +// License: MIT + + +@function first($list) { + @return nth($list, 1); +} + + +@function last($list) { + @return nth($list, length($list)); +} + + +@function last-index($list, $value) { + @for $i from length($list)*-1 through -1 { + @if nth($list, abs($i)) == $value { + @return abs($i); + } + } + + @return null; +} + + +@function to-string($list, $glue: '', $is-nested: false) { + $result: null; + + @for $i from 1 through length($list) { + $e: nth($list, $i); + + @if type-of($e) == list { + $result: $result#{to-string($e, $glue, true)}; + } + + @else { + $result: if($i != length($list) or $is-nested, $result#{$e}#{$glue}, $result#{$e}); + } + } + + @return $result; +} + + +@function prepend($list, $value) { + @return join($value, $list); +} + + +@function insert-nth($list, $index, $value) { + $result: false; + + @if type-of($index) != number { + @warn "$index: #{quote($index)} is not a number for `insert-nth`."; + @return $result; + } + + @else if $index < 1 { + @warn "List index 0 must be a non-zero integer for `insert-nth`"; + @return $result; + } + + @else if $index > length($list) { + @warn "List index is #{$index} but list is only #{length($list)} item long for `insert-nth'."; + @return $result; + } + + @else { + $result: (); + + @for $i from 1 through length($list) { + @if $i == $index { + $result: append($result, $value); + } + + $result: append($result, nth($list, $i)); + } + } + + @return $result; +} + + +@function replace-nth($list, $index, $value) { + $result: false; + + @if type-of($index) != number { + @warn "$index: #{quote($index)} is not a number for `replace-nth`."; + @return $result; + } + + @else if $index == 0 { + @warn "List index 0 must be a non-zero integer for `replace-nth`."; + @return $result; + } + + @else if abs($index) > length($list) { + @warn "List index is #{$index} but list is only #{length($list)} item long for `replace-nth`."; + @return $result; + } + + @else { + $result: (); + $index: if($index < 0, length($list) + $index + 1, $index); + + @for $i from 1 through length($list) { + @if $i == $index { + $result: append($result, $value); + } + + @else { + $result: append($result, nth($list, $i)); + } + } + } + + @return $result; +} + + +@function replace($list, $old-value, $new-value, $recursive: false) { + $result: (); + + @for $i from 1 through length($list) { + @if type-of(nth($list, $i)) == list and $recursive { + $result: append($result, replace(nth($list, $i), $old-value, $new-value, $recursive)); + } + + @else { + @if nth($list, $i) == $old-value { + $result: append($result, $new-value); + } + + @else { + $result: append($result, nth($list, $i)); + } + } + } + + @return $result; +} + + +@function remove-nth($list, $index) { + $result: false; + + @if type-of($index) != number { + @warn "$index: #{quote($index)} is not a number for `remove-nth`."; + @return $result; + } + + @else if $index == 0 { + @warn "List index 0 must be a non-zero integer for `remove-nth`."; + @return $result; + } + + @else if abs($index) > length($list) { + @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; + @return $result; + } + + @else { + $result: (); + $index: if($index < 0, length($list) + $index + 1, $index); + + @for $i from 1 through length($list) { + @if $i != $index { + $result: append($result, nth($list, $i)); + } + } + } + + @return $result; +} + + +@function remove($list, $value, $recursive: false) { + $result: (); + + @for $i from 1 through length($list) { + @if type-of(nth($list, $i)) == list and $recursive { + $result: append($result, remove(nth($list, $i), $value, $recursive)); + } + + @else if nth($list, $i) != $value { + $result: append($result, nth($list, $i)); + } + } + + @return $result; +} + + +@function slice($list, $start: 1, $end: length($list)) { + $result: false; + + @if type-of($start) != number or type-of($end) != number { + @warn "Either $start or $end are not a number for `slice`."; + @return $result; + } + + @else if $start > $end { + @warn "The start index has to be lesser than or equals to the end index for `slice`."; + @return $result; + } + + @else if $start < 1 or $end < 1 { + @warn "List indexes must be non-zero integers for `slice`."; + @return $result; + } + + @else if $start > length($list) { + @warn "List index is #{$start} but list is only #{length($list)} item long for `slice`."; + @return $result; + } + + @else if $end > length($list) { + @warn "List index is #{$end} but list is only #{length($list)} item long for `slice`."; + @return $result; + } + + @else { + $result: (); + + @for $i from $start through $end { + $result: append($result, nth($list, $i)); + } + } + + @return $result; +} + + +@function reverse($list, $recursive: false) { + $result: (); + + @for $i from length($list)*-1 through -1 { + @if type-of(nth($list, abs($i))) == list and $recursive { + $result: append($result, reverse(nth($list, abs($i)), $recursive)); + } + + @else { + $result: append($result, nth($list, abs($i))); + } + } + + @return $result; +} + + +@function shift($list, $value: 1) { + $result: (); + + @for $i from 0 to length($list) { + $result: append($result, nth($list, ($i - $value) % length($list) + 1)); + } + + @return $result; +} diff --git a/WebContent/VAADIN/themes/valo/util/_util.scss b/WebContent/VAADIN/themes/valo/util/_util.scss new file mode 100644 index 0000000000..2f7b28b3ad --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/_util.scss @@ -0,0 +1,27 @@ +// Align element vertically inside +@mixin valo-vertical-align-guide ($to-align: (), $align: middle, $pseudo-element: after) { + &:#{$pseudo-element} { + content: ""; + display: inline-block; + width: 0; + height: 100%; + vertical-align: middle; + } + + @if length($to-align) > 0 { + @each $selector in $to-align { + & > #{$selector} { + vertical-align: $align; + } + } + } +} + + + +@mixin valo-tappable { + @include user-select(none); + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-touch-callout: none; + cursor: pointer; +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/_bourbon-deprecated-upcoming.scss b/WebContent/VAADIN/themes/valo/util/bourbon/_bourbon-deprecated-upcoming.scss new file mode 100644 index 0000000000..5332496d82 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/_bourbon-deprecated-upcoming.scss @@ -0,0 +1,13 @@ +//************************************************************************// +// These mixins/functions are deprecated +// They will be removed in the next MAJOR version release +//************************************************************************// +@mixin box-shadow ($shadows...) { + @include prefixer(box-shadow, $shadows, spec); + @warn "box-shadow is deprecated and will be removed in the next major version release"; +} + +@mixin background-size ($lengths...) { + @include prefixer(background-size, $lengths, spec); + @warn "background-size is deprecated and will be removed in the next major version release"; +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/_bourbon.scss b/WebContent/VAADIN/themes/valo/util/bourbon/_bourbon.scss new file mode 100644 index 0000000000..e97b2fe8d4 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/_bourbon.scss @@ -0,0 +1,69 @@ +// Settings +@import "settings/prefixer"; +@import "settings/px-to-em"; + +// Custom Helpers +@import "helpers/gradient-positions-parser"; +@import "helpers/linear-positions-parser"; +@import "helpers/radial-arg-parser"; +@import "helpers/radial-positions-parser"; +@import "helpers/render-gradients"; +@import "helpers/shape-size-stripper"; + +// Custom Functions +@import "functions/flex-grid"; +@import "functions/grid-width"; +@import "functions/golden-ratio"; +@import "functions/linear-gradient"; +@import "functions/modular-scale"; +@import "functions/px-to-em"; +@import "functions/radial-gradient"; +@import "functions/strip-units"; +@import "functions/tint-shade"; +@import "functions/transition-property-name"; +@import "functions/unpack"; + +// CSS3 Mixins +@import "css3/animation"; +@import "css3/appearance"; +@import "css3/backface-visibility"; +@import "css3/background"; +@import "css3/background-image"; +@import "css3/border-image"; +@import "css3/border-radius"; +@import "css3/box-sizing"; +@import "css3/calc"; +@import "css3/columns"; +@import "css3/flex-box"; +@import "css3/font-face"; +@import "css3/hyphens"; +@import "css3/hidpi-media-query"; +@import "css3/image-rendering"; +@import "css3/inline-block"; +@import "css3/keyframes"; +@import "css3/linear-gradient"; +@import "css3/perspective"; +@import "css3/radial-gradient"; +@import "css3/transform"; +@import "css3/transition"; +@import "css3/user-select"; +@import "css3/placeholder"; + +// Addons & other mixins +@import "addons/button"; +@import "addons/clearfix"; +@import "addons/directional-values"; +@import "addons/ellipsis"; +@import "addons/font-family"; +@import "addons/hide-text"; +//@import "addons/html5-input-types"; +@import "addons/position"; +@import "addons/prefixer"; +@import "addons/rem"; +@import "addons/retina-image"; +@import "addons/size"; +@import "addons/timing-functions"; +@import "addons/triangle"; + +// Soon to be deprecated Mixins +@import "bourbon-deprecated-upcoming"; diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_button.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_button.scss new file mode 100644 index 0000000000..fcc39fdf35 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_button.scss @@ -0,0 +1,273 @@ +@mixin button ($style: simple, $base-color: #4294f0) { + + @if type-of($style) == color { + $base-color: $style; + $style: simple; + } + + // Grayscale button + @if $base-color == grayscale($base-color) { + @if $style == simple { + @include simple($base-color, $grayscale: true); + } + + @else if $style == shiny { + @include shiny($base-color, $grayscale: true); + } + + @else if $style == pill { + @include pill($base-color, $grayscale: true); + } + } + + // Colored button + @else { + @if $style == simple { + @include simple($base-color); + } + + @else if $style == shiny { + @include shiny($base-color); + } + + @else if $style == pill { + @include pill($base-color); + } + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } +} + + +// Simple Button +//************************************************************************// +@mixin simple($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); + $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); + $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); + + @if lightness($base-color) > 70% { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border: grayscale($border); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + + border: 1px solid $border; + border-radius: 3px; + box-shadow: inset 0 1px 0 0 $inset-shadow; + color: $color; + display: inline-block; + font-size: inherit; + font-weight: bold; + @include linear-gradient ($base-color, $stop-gradient); + padding: 7px 18px; + text-decoration: none; + text-shadow: 0 1px 0 $text-shadow; + background-clip: padding-box; + + &:hover:not(:disabled) { + $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); + $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + } + + box-shadow: inset 0 1px 0 0 $inset-shadow-hover; + cursor: pointer; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + } + + &:active:not(:disabled) { + $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); + + @if $grayscale == true { + $border-active: grayscale($border-active); + $inset-shadow-active: grayscale($inset-shadow-active); + } + + border: 1px solid $border-active; + box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee; + } +} + + +// Shiny Button +//************************************************************************// +@mixin shiny($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); + $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); + $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); + $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); + $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); + $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); + $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); + + @if lightness($base-color) > 70% { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border: grayscale($border); + $border-bottom: grayscale($border-bottom); + $fourth-stop: grayscale($fourth-stop); + $inset-shadow: grayscale($inset-shadow); + $second-stop: grayscale($second-stop); + $text-shadow: grayscale($text-shadow); + $third-stop: grayscale($third-stop); + } + + border: 1px solid $border; + border-bottom: 1px solid $border-bottom; + border-radius: 5px; + box-shadow: inset 0 1px 0 0 $inset-shadow; + color: $color; + display: inline-block; + font-size: inherit; + font-weight: bold; + @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); + padding: 8px 20px; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px $text-shadow; + + &:hover:not(:disabled) { + $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); + $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); + $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); + $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); + + @if $grayscale == true { + $first-stop-hover: grayscale($first-stop-hover); + $second-stop-hover: grayscale($second-stop-hover); + $third-stop-hover: grayscale($third-stop-hover); + $fourth-stop-hover: grayscale($fourth-stop-hover); + } + + cursor: pointer; + @include linear-gradient(top, $first-stop-hover 0%, + $second-stop-hover 50%, + $third-stop-hover 50%, + $fourth-stop-hover 100%); + } + + &:active:not(:disabled) { + $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); + + @if $grayscale == true { + $inset-shadow-active: grayscale($inset-shadow-active); + } + + box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff; + } +} + + +// Pill Button +//************************************************************************// +@mixin pill($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); + $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); + $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); + $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); + + @if lightness($base-color) > 70% { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + + border: 1px solid $border-top; + border-color: $border-top $border-sides $border-bottom; + border-radius: 16px; + box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3; + color: $color; + display: inline-block; + font-size: inherit; + font-weight: normal; + line-height: 1; + @include linear-gradient ($base-color, $stop-gradient); + padding: 5px 16px; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px $text-shadow; + background-clip: padding-box; + + &:hover:not(:disabled) { + $base-color-hover: adjust-color($base-color, $lightness: -4.5%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); + $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); + $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + $text-shadow-hover: grayscale($text-shadow-hover); + } + + border: 1px solid $border-top; + border-color: $border-top $border-sides $border-bottom; + box-shadow: inset 0 1px 0 0 $inset-shadow-hover; + cursor: pointer; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + text-shadow: 0 -1px 1px $text-shadow-hover; + background-clip: padding-box; + } + + &:active:not(:disabled) { + $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); + $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); + $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); + $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); + $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); + + @if $grayscale == true { + $active-color: grayscale($active-color); + $border-active: grayscale($border-active); + $border-bottom-active: grayscale($border-bottom-active); + $inset-shadow-active: grayscale($inset-shadow-active); + $text-shadow-active: grayscale($text-shadow-active); + } + + background: $active-color; + border: 1px solid $border-active; + border-bottom: 1px solid $border-bottom-active; + box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff; + text-shadow: 0 -1px 1px $text-shadow-active; + } +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_clearfix.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_clearfix.scss new file mode 100644 index 0000000000..783cfbc792 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_clearfix.scss @@ -0,0 +1,23 @@ +// Modern micro clearfix provides an easy way to contain floats without adding additional markup. +// +// Example usage: +// +// // Contain all floats within .wrapper +// .wrapper { +// @include clearfix; +// .content, +// .sidebar { +// float : left; +// } +// } + +@mixin clearfix { + &:after { + content:""; + display:table; + clear:both; + } +} + +// Acknowledgements +// Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php) diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_directional-values.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_directional-values.scss new file mode 100644 index 0000000000..4818f62fd8 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_directional-values.scss @@ -0,0 +1,114 @@ +// directional-property mixins are shorthands +// for writing properties like the following +// +// @include margin(null 0 10px); +// ------ +// margin-right: 0; +// margin-bottom: 10px; +// margin-left: 0; +// +// - or - +// +// @include border-style(dotted null); +// ------ +// border-top-style: dotted; +// border-bottom-style: dotted; +// +// ------ +// +// Note: You can also use false instead of null + +@function collapse-directionals($vals) { + $output: null; + + $A: nth( $vals, 1 ); + $B: if( length($vals) < 2, $A, nth($vals, 2)); + $C: if( length($vals) < 3, $A, nth($vals, 3)); + $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) )); + + @if $A == 0 { $A: 0 } + @if $B == 0 { $B: 0 } + @if $C == 0 { $C: 0 } + @if $D == 0 { $D: 0 } + + @if $A == $B and $A == $C and $A == $D { $output: $A } + @else if $A == $C and $B == $D { $output: $A $B } + @else if $B == $D { $output: $A $B $C } + @else { $output: $A $B $C $D } + + @return $output; +} + +@function contains-falsy($list) { + @each $item in $list { + @if not $item { + @return true; + } + } + + @return false; +} + +@mixin directional-property($pre, $suf, $vals) { + // Property Names + $top: $pre + "-top" + if($suf, "-#{$suf}", ""); + $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); + $left: $pre + "-left" + if($suf, "-#{$suf}", ""); + $right: $pre + "-right" + if($suf, "-#{$suf}", ""); + $all: $pre + if($suf, "-#{$suf}", ""); + + // Get list inside $vals (is there a better way?) + @each $val in $vals { $vals: $val; } + + $vals: collapse-directionals($vals); + + @if contains-falsy($vals) { + @if nth($vals, 1) { #{$top}: nth($vals, 1); } + + @if length($vals) == 1 { + @if nth($vals, 1) { #{$right}: nth($vals, 1); } + } @else { + @if nth($vals, 2) { #{$right}: nth($vals, 2); } + } + + // prop: top/bottom right/left + @if length($vals) == 2 { + @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } + @if nth($vals, 2) { #{$left}: nth($vals, 2); } + + // prop: top right/left bottom + } @else if length($vals) == 3 { + @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } + @if nth($vals, 2) { #{$left}: nth($vals, 2); } + + // prop: top right bottom left + } @else if length($vals) == 4 { + @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } + @if nth($vals, 4) { #{$left}: nth($vals, 4); } + } + + // prop: top/right/bottom/left + } @else { + #{$all}: $vals; + } +} + +@mixin margin($vals...) { + @include directional-property(margin, false, $vals); +} + +@mixin padding($vals...) { + @include directional-property(padding, false, $vals); +} + +@mixin border-style($vals...) { + @include directional-property(border, style, $vals); +} + +@mixin border-color($vals...) { + @include directional-property(border, color, $vals); +} + +@mixin border-width($vals...) { + @include directional-property(border, width, $vals); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_ellipsis.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_ellipsis.scss new file mode 100644 index 0000000000..a8ea2a4a86 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_ellipsis.scss @@ -0,0 +1,7 @@ +@mixin ellipsis($width: 100%) { + display: inline-block; + max-width: $width; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_font-family.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_font-family.scss new file mode 100644 index 0000000000..31f5d9ca75 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_font-family.scss @@ -0,0 +1,5 @@ +$georgia: Georgia, Cambria, "Times New Roman", Times, serif; +$helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; +$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; +$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; +$verdana: Verdana, Geneva, sans-serif; diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_hide-text.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_hide-text.scss new file mode 100644 index 0000000000..fc7943811d --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_hide-text.scss @@ -0,0 +1,10 @@ +@mixin hide-text { + overflow: hidden; + + &:before { + content: ""; + display: block; + width: 0; + height: 100%; + } +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_html5-input-types.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_html5-input-types.scss new file mode 100644 index 0000000000..26fc879021 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_html5-input-types.scss @@ -0,0 +1,110 @@ +//************************************************************************// +// Generate a variable ($all-text-inputs) with a list of all html5 +// input types that have a text-based input, excluding textarea. +// http://diveintohtml5.org/forms.html +//************************************************************************// +$inputs-list: 'input[type="email"]', + 'input[type="number"]', + 'input[type="password"]', + 'input[type="search"]', + 'input[type="tel"]', + 'input[type="text"]', + 'input[type="url"]', + + // Webkit & Gecko may change the display of these in the future + 'input[type="color"]', + 'input[type="date"]', + 'input[type="datetime"]', + 'input[type="datetime-local"]', + 'input[type="month"]', + 'input[type="time"]', + 'input[type="week"]'; + +$unquoted-inputs-list: (); +@each $input-type in $inputs-list { + $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma) !global; +} + +$all-text-inputs: $unquoted-inputs-list; + + +// Hover Pseudo-class +//************************************************************************// +$all-text-inputs-hover: (); +@each $input-type in $unquoted-inputs-list { + $input-type-hover: $input-type + ":hover"; + $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma) !global; +} + +// Focus Pseudo-class +//************************************************************************// +$all-text-inputs-focus: (); +@each $input-type in $unquoted-inputs-list { + $input-type-focus: $input-type + ":focus"; + $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma) !global; +} + +// You must use interpolation on the variable: +// #{$all-text-inputs} +// #{$all-text-inputs-hover} +// #{$all-text-inputs-focus} + +// Example +//************************************************************************// +// #{$all-text-inputs}, textarea { +// border: 1px solid red; +// } + + + +//************************************************************************// +// Generate a variable ($all-button-inputs) with a list of all html5 +// input types that have a button-based input, excluding button. +//************************************************************************// +$inputs-button-list: 'input[type="button"]', + 'input[type="reset"]', + 'input[type="submit"]'; + +$unquoted-inputs-button-list: (); +@each $input-type in $inputs-button-list { + $unquoted-inputs-button-list: append($unquoted-inputs-button-list, unquote($input-type), comma); +} + +$all-button-inputs: $unquoted-inputs-button-list; + + +// Hover Pseudo-class +//************************************************************************// +$all-button-inputs-hover: (); +@each $input-type in $unquoted-inputs-button-list { + $input-type-hover: $input-type + ":hover"; + $all-button-inputs-hover: append($all-button-inputs-hover, $input-type-hover, comma); +} + +// Focus Pseudo-class +//************************************************************************// +$all-button-inputs-focus: (); +@each $input-type in $unquoted-inputs-button-list { + $input-type-focus: $input-type + ":focus"; + $all-button-inputs-focus: append($all-button-inputs-focus, $input-type-focus, comma); +} + +// Active Pseudo-class +//************************************************************************// +$all-button-inputs-active: (); +@each $input-type in $unquoted-inputs-button-list { + $input-type-active: $input-type + ":active"; + $all-button-inputs-active: append($all-button-inputs-active, $input-type-active, comma); +} + +// You must use interpolation on the variable: +// #{$all-button-inputs} +// #{$all-button-inputs-hover} +// #{$all-button-inputs-focus} +// #{$all-button-inputs-active} + +// Example +//************************************************************************// +// #{$all-button-inputs}, button { +// border: 1px solid red; +// } diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_position.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_position.scss new file mode 100644 index 0000000000..aba34edcd9 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_position.scss @@ -0,0 +1,32 @@ +@mixin position ($position: relative, $coordinates: 0 0 0 0) { + + @if type-of($position) == list { + $coordinates: $position; + $position: relative; + } + + $coordinates: unpack($coordinates); + + $top: nth($coordinates, 1); + $right: nth($coordinates, 2); + $bottom: nth($coordinates, 3); + $left: nth($coordinates, 4); + + position: $position; + + @if ($top and $top == auto) or (type-of($top) == number and not unitless($top)) { + top: $top; + } + + @if ($right and $right == auto) or (type-of($right) == number and not unitless($right)) { + right: $right; + } + + @if ($bottom and $bottom == auto) or (type-of($bottom) == number and not unitless($bottom)) { + bottom: $bottom; + } + + @if ($left and $left == auto) or (type-of($left) == number and not unitless($left)) { + left: $left; + } +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_prefixer.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_prefixer.scss new file mode 100644 index 0000000000..bac1aed2cc --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_prefixer.scss @@ -0,0 +1,45 @@ +//************************************************************************// +// Example: @include prefixer(border-radius, $radii, webkit ms spec); +//************************************************************************// +// Variables located in /settings/_prefixer.scss + +@mixin prefixer ($property, $value, $prefixes) { + @each $prefix in $prefixes { + @if $prefix == webkit { + @if $prefix-for-webkit { + -webkit-#{$property}: $value; + } + } + @else if $prefix == moz { + @if $prefix-for-mozilla { + -moz-#{$property}: $value; + } + } + @else if $prefix == ms { + @if $prefix-for-microsoft { + -ms-#{$property}: $value; + } + } + @else if $prefix == o { + @if $prefix-for-opera { + -o-#{$property}: $value; + } + } + @else if $prefix == spec { + @if $prefix-for-spec { + #{$property}: $value; + } + } + @else { + @warn "Unrecognized prefix: #{$prefix}"; + } + } +} + +@mixin disable-prefix-for-all() { + $prefix-for-webkit: false; + $prefix-for-mozilla: false; + $prefix-for-microsoft: false; + $prefix-for-opera: false; + $prefix-for-spec: false; +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_rem.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_rem.scss new file mode 100644 index 0000000000..ddd7022b44 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_rem.scss @@ -0,0 +1,33 @@ +@mixin rem($property, $size, $base: $em-base) { + @if not unitless($base) { + $base: strip-units($base); + } + + $unitless_values: (); + @each $num in $size { + @if not unitless($num) { + @if unit($num) == "em" { + $num: $num * $base; + } + + $num: strip-units($num); + } + + $unitless_values: append($unitless_values, $num); + } + $size: $unitless_values; + + $pixel_values: (); + $rem_values: (); + @each $value in $pxval { + $pixel_value: $value * 1px; + $pixel_values: append($pixel_values, $pixel_value); + + $rem_value: ($value / $base) * 1rem; + $rem_values: append($rem_values, $rem_value); + } + + #{$property}: $pixel_values; + #{$property}: $rem_values; +} + diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_retina-image.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_retina-image.scss new file mode 100644 index 0000000000..7931bd1333 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_retina-image.scss @@ -0,0 +1,31 @@ +@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: false) { + @if $asset-pipeline { + background-image: image-url("#{$filename}.#{$extension}"); + } + @else { + background-image: url("#{$filename}.#{$extension}"); + } + + @include hidpi { + @if $asset-pipeline { + @if $retina-filename { + background-image: image-url("#{$retina-filename}.#{$extension}"); + } + @else { + background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); + } + } + + @else { + @if $retina-filename { + background-image: url("#{$retina-filename}.#{$extension}"); + } + @else { + background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); + } + } + + background-size: $background-size; + + } +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_size.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_size.scss new file mode 100644 index 0000000000..342e41b79f --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_size.scss @@ -0,0 +1,44 @@ +@mixin size($size) { + @if length($size) == 1 { + @if $size == auto { + width: $size; + height: $size; + } + + @else if unitless($size) { + width: $size + px; + height: $size + px; + } + + @else if not(unitless($size)) { + width: $size; + height: $size; + } + } + + // Width x Height + @if length($size) == 2 { + $width: nth($size, 1); + $height: nth($size, 2); + + @if $width == auto { + width: $width; + } + @else if not(unitless($width)) { + width: $width; + } + @else if unitless($width) { + width: $width + px; + } + + @if $height == auto { + height: $height; + } + @else if not(unitless($height)) { + height: $height; + } + @else if unitless($height) { + height: $height + px; + } + } +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_timing-functions.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_timing-functions.scss new file mode 100644 index 0000000000..51b2410914 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_timing-functions.scss @@ -0,0 +1,32 @@ +// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) +// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html + +// EASE IN +$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); +$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); +$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); +$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); +$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); +$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); +$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); +$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); + +// EASE OUT +$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); +$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); +$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); +$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); +$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); +$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); +$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); +$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); + +// EASE IN OUT +$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); +$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); +$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); +$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); +$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); +$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); +$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); +$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_triangle.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_triangle.scss new file mode 100644 index 0000000000..0e02aca2ca --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_triangle.scss @@ -0,0 +1,45 @@ +@mixin triangle ($size, $color, $direction) { + height: 0; + width: 0; + + @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { + border-color: transparent; + border-style: solid; + border-width: $size / 2; + + @if $direction == up { + border-bottom-color: $color; + + } @else if $direction == right { + border-left-color: $color; + + } @else if $direction == down { + border-top-color: $color; + + } @else if $direction == left { + border-right-color: $color; + } + } + + @else if ($direction == up-right) or ($direction == up-left) { + border-top: $size solid $color; + + @if $direction == up-right { + border-left: $size solid transparent; + + } @else if $direction == up-left { + border-right: $size solid transparent; + } + } + + @else if ($direction == down-right) or ($direction == down-left) { + border-bottom: $size solid $color; + + @if $direction == down-right { + border-left: $size solid transparent; + + } @else if $direction == down-left { + border-right: $size solid transparent; + } + } +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_animation.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_animation.scss new file mode 100644 index 0000000000..08c3dbf157 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_animation.scss @@ -0,0 +1,52 @@ +// http://www.w3.org/TR/css3-animations/#the-animation-name-property- +// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. + +// Official animation shorthand property. +@mixin animation ($animations...) { + @include prefixer(animation, $animations, webkit moz spec); +} + +// Individual Animation Properties +@mixin animation-name ($names...) { + @include prefixer(animation-name, $names, webkit moz spec); +} + + +@mixin animation-duration ($times...) { + @include prefixer(animation-duration, $times, webkit moz spec); +} + + +@mixin animation-timing-function ($motions...) { +// ease | linear | ease-in | ease-out | ease-in-out + @include prefixer(animation-timing-function, $motions, webkit moz spec); +} + + +@mixin animation-iteration-count ($values...) { +// infinite | <number> + @include prefixer(animation-iteration-count, $values, webkit moz spec); +} + + +@mixin animation-direction ($directions...) { +// normal | alternate + @include prefixer(animation-direction, $directions, webkit moz spec); +} + + +@mixin animation-play-state ($states...) { +// running | paused + @include prefixer(animation-play-state, $states, webkit moz spec); +} + + +@mixin animation-delay ($times...) { + @include prefixer(animation-delay, $times, webkit moz spec); +} + + +@mixin animation-fill-mode ($modes...) { +// none | forwards | backwards | both + @include prefixer(animation-fill-mode, $modes, webkit moz spec); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_appearance.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_appearance.scss new file mode 100644 index 0000000000..3eb16e45de --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_appearance.scss @@ -0,0 +1,3 @@ +@mixin appearance ($value) { + @include prefixer(appearance, $value, webkit moz ms o spec); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_backface-visibility.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_backface-visibility.scss new file mode 100644 index 0000000000..1161fe60dd --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_backface-visibility.scss @@ -0,0 +1,6 @@ +//************************************************************************// +// Backface-visibility mixin +//************************************************************************// +@mixin backface-visibility($visibility) { + @include prefixer(backface-visibility, $visibility, webkit spec); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_background-image.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_background-image.scss new file mode 100644 index 0000000000..17016b91b9 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_background-image.scss @@ -0,0 +1,48 @@ +//************************************************************************// +// Background-image property for adding multiple background images with +// gradients, or for stringing multiple gradients together. +//************************************************************************// + +@mixin background-image($images...) { + background-image: _add-prefix($images, webkit); + background-image: _add-prefix($images); +} + +@function _add-prefix($images, $vendor: false) { + $images-prefixed: (); + $gradient-positions: false; + @for $i from 1 through length($images) { + $type: type-of(nth($images, $i)); // Get type of variable - List or String + + // If variable is a list - Gradient + @if $type == list { + $gradient-type: nth(nth($images, $i), 1); // linear or radial + $gradient-pos: null; + $gradient-args: null; + + @if ($gradient-type == linear) or ($gradient-type == radial) { + $gradient-pos: nth(nth($images, $i), 2); // Get gradient position + $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue) + } + @else { + $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) + } + + $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); + $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); + $images-prefixed: append($images-prefixed, $gradient, comma); + } + // If variable is a string - Image + @else if $type == string { + $images-prefixed: join($images-prefixed, nth($images, $i), comma); + } + } + @return $images-prefixed; +} + +//Examples: + //@include background-image(linear-gradient(top, orange, red)); + //@include background-image(radial-gradient(50% 50%, cover circle, orange, red)); + //@include background-image(url("/images/a.png"), linear-gradient(orange, red)); + //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png")); + //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red)); diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_background.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_background.scss new file mode 100644 index 0000000000..975f0a6e5f --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_background.scss @@ -0,0 +1,103 @@ +//************************************************************************// +// Background property for adding multiple backgrounds using shorthand +// notation. +//************************************************************************// + +@mixin background( + $background-1 , $background-2: null, + $background-3: null, $background-4: null, + $background-5: null, $background-6: null, + $background-7: null, $background-8: null, + $background-9: null, $background-10: null, + $fallback: null +) { + $backgrounds: $background-1, $background-2, + $background-3, $background-4, + $background-5, $background-6, + $background-7, $background-8, + $background-9, $background-10; + + $fallback-color: false; + @if (type-of($fallback) == color) or ($fallback == "transparent") { + $fallback-color: $fallback; + } + @else { + $fallback-color: _extract-background-color($backgrounds); + } + + @if $fallback-color { + background-color: $fallback-color; + } + background: _background-add-prefix($backgrounds, webkit); + background: _background-add-prefix($backgrounds); +} + +@function _extract-background-color($backgrounds) { + $final-bg-layer: nth($backgrounds, length($backgrounds)); + @if type-of($final-bg-layer) == list { + @for $i from 1 through length($final-bg-layer) { + $value: nth($final-bg-layer, $i); + @if type-of($value) == color { + @return $value; + } + } + } + @return false; +} + +@function _background-add-prefix($backgrounds, $vendor: false) { + $backgrounds-prefixed: (); + + @for $i from 1 through length($backgrounds) { + $shorthand: nth($backgrounds, $i); // Get member for current index + $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image) + + // If shorthand is a list (gradient) + @if $type == list { + $first-member: nth($shorthand, 1); // Get first member of shorthand + + // Linear Gradient + @if index(linear radial, nth($first-member, 1)) { + $gradient-type: nth($first-member, 1); // linear || radial + $gradient-args: false; + $gradient-positions: false; + $shorthand-start: false; + @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,... + $gradient-positions: nth($first-member, 2); + $gradient-args: nth($first-member, 3); + $shorthand-start: 2; + } + @else { // Linear gradient only - lg(red,orange),... + $gradient-positions: nth($shorthand, 2); + $gradient-args: nth($shorthand, 3); // Get gradient (red, blue) + } + + $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions); + $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); + + // Append any additional shorthand args to gradient + @if $shorthand-start { + @for $j from $shorthand-start through length($shorthand) { + $gradient: join($gradient, nth($shorthand, $j), space); + } + } + $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma); + } + // Image with additional properties + @else { + $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma); + } + } + // If shorthand is a simple string (color or image) + @else if $type == string { + $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma); + } + } + @return $backgrounds-prefixed; +} + +//Examples: + //@include background(linear-gradient(top, orange, red)); + //@include background(radial-gradient(circle at 40% 40%, orange, red)); + //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red)); + //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png")); diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_border-image.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_border-image.scss new file mode 100644 index 0000000000..e552ee442e --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_border-image.scss @@ -0,0 +1,56 @@ +@mixin border-image($images) { + -webkit-border-image: _border-add-prefix($images, webkit); + -moz-border-image: _border-add-prefix($images, moz); + -o-border-image: _border-add-prefix($images, o); + border-image: _border-add-prefix($images); + border-style: solid; +} + +@function _border-add-prefix($images, $vendor: false) { + $border-image: null; + $images-type: type-of(nth($images, 1)); + $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial) + + // If input is a gradient + @if $images-type == string { + @if ($first-var == "linear") or ($first-var == "radial") { + $gradient-type: nth($images, 1); // Get type of gradient (linear || radial) + $gradient-pos: nth($images, 2); // Get gradient position + $gradient-args: nth($images, 3); // Get actual gradient (red, blue) + $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); + $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); + } + // If input is a URL + @else { + $border-image: $images; + } + } + // If input is gradient or url + additional args + @else if $images-type == list { + $type: type-of(nth($images, 1)); // Get type of variable - List or String + + // If variable is a list - Gradient + @if $type == list { + $gradient: nth($images, 1); + $gradient-type: nth($gradient, 1); // Get type of gradient (linear || radial) + $gradient-pos: nth($gradient, 2); // Get gradient position + $gradient-args: nth($gradient, 3); // Get actual gradient (red, blue) + $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); + $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); + + @for $i from 2 through length($images) { + $border-image: append($border-image, nth($images, $i)); + } + } + } + @return $border-image; +} + +//Examples: +// @include border-image(url("image.png")); +// @include border-image(url("image.png") 20 stretch); +// @include border-image(linear-gradient(45deg, orange, yellow)); +// @include border-image(linear-gradient(45deg, orange, yellow) stretch); +// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); +// @include border-image(radial-gradient(top, cover, orange, yellow, orange)); + diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_border-radius.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_border-radius.scss new file mode 100644 index 0000000000..7c17190109 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_border-radius.scss @@ -0,0 +1,22 @@ +//************************************************************************// +// Shorthand Border-radius mixins +//************************************************************************// +@mixin border-top-radius($radii) { + @include prefixer(border-top-left-radius, $radii, spec); + @include prefixer(border-top-right-radius, $radii, spec); +} + +@mixin border-bottom-radius($radii) { + @include prefixer(border-bottom-left-radius, $radii, spec); + @include prefixer(border-bottom-right-radius, $radii, spec); +} + +@mixin border-left-radius($radii) { + @include prefixer(border-top-left-radius, $radii, spec); + @include prefixer(border-bottom-left-radius, $radii, spec); +} + +@mixin border-right-radius($radii) { + @include prefixer(border-top-right-radius, $radii, spec); + @include prefixer(border-bottom-right-radius, $radii, spec); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_box-sizing.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_box-sizing.scss new file mode 100644 index 0000000000..f07e1d412e --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_box-sizing.scss @@ -0,0 +1,4 @@ +@mixin box-sizing ($box) { +// content-box | border-box | inherit + @include prefixer(box-sizing, $box, webkit moz spec); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_calc.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_calc.scss new file mode 100644 index 0000000000..94d7e4cef3 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_calc.scss @@ -0,0 +1,4 @@ +@mixin calc($property, $value) { + #{$property}: -webkit-calc(#{$value}); + #{$property}: calc(#{$value}); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_columns.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_columns.scss new file mode 100644 index 0000000000..42274a4eeb --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_columns.scss @@ -0,0 +1,47 @@ +@mixin columns($arg: auto) { +// <column-count> || <column-width> + @include prefixer(columns, $arg, webkit moz spec); +} + +@mixin column-count($int: auto) { +// auto || integer + @include prefixer(column-count, $int, webkit moz spec); +} + +@mixin column-gap($length: normal) { +// normal || length + @include prefixer(column-gap, $length, webkit moz spec); +} + +@mixin column-fill($arg: auto) { +// auto || length + @include prefixer(columns-fill, $arg, webkit moz spec); +} + +@mixin column-rule($arg) { +// <border-width> || <border-style> || <color> + @include prefixer(column-rule, $arg, webkit moz spec); +} + +@mixin column-rule-color($color) { + @include prefixer(column-rule-color, $color, webkit moz spec); +} + +@mixin column-rule-style($style: none) { +// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid + @include prefixer(column-rule-style, $style, webkit moz spec); +} + +@mixin column-rule-width ($width: none) { + @include prefixer(column-rule-width, $width, webkit moz spec); +} + +@mixin column-span($arg: none) { +// none || all + @include prefixer(column-span, $arg, webkit moz spec); +} + +@mixin column-width($length: auto) { +// auto || length + @include prefixer(column-width, $length, webkit moz spec); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_flex-box.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_flex-box.scss new file mode 100644 index 0000000000..b48476e870 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_flex-box.scss @@ -0,0 +1,321 @@ +// CSS3 Flexible Box Model and property defaults + +// Custom shorthand notation for flexbox +@mixin box($orient: inline-axis, $pack: start, $align: stretch) { + @include display-box; + @include box-orient($orient); + @include box-pack($pack); + @include box-align($align); +} + +@mixin display-box { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; // IE 10 + display: box; +} + +@mixin box-orient($orient: inline-axis) { +// horizontal|vertical|inline-axis|block-axis|inherit + @include prefixer(box-orient, $orient, webkit moz spec); +} + +@mixin box-pack($pack: start) { +// start|end|center|justify + @include prefixer(box-pack, $pack, webkit moz spec); + -ms-flex-pack: $pack; // IE 10 +} + +@mixin box-align($align: stretch) { +// start|end|center|baseline|stretch + @include prefixer(box-align, $align, webkit moz spec); + -ms-flex-align: $align; // IE 10 +} + +@mixin box-direction($direction: normal) { +// normal|reverse|inherit + @include prefixer(box-direction, $direction, webkit moz spec); + -ms-flex-direction: $direction; // IE 10 +} + +@mixin box-lines($lines: single) { +// single|multiple + @include prefixer(box-lines, $lines, webkit moz spec); +} + +@mixin box-ordinal-group($int: 1) { + @include prefixer(box-ordinal-group, $int, webkit moz spec); + -ms-flex-order: $int; // IE 10 +} + +@mixin box-flex($value: 0.0) { + @include prefixer(box-flex, $value, webkit moz spec); + -ms-flex: $value; // IE 10 +} + +@mixin box-flex-group($int: 1) { + @include prefixer(box-flex-group, $int, webkit moz spec); +} + +// CSS3 Flexible Box Model and property defaults +// Unified attributes for 2009, 2011, and 2012 flavours. + +// 2009 - display (box | inline-box) +// 2011 - display (flexbox | inline-flexbox) +// 2012 - display (flex | inline-flex) +@mixin display($value) { +// flex | inline-flex + @if $value == "flex" { + // 2009 + display: -webkit-box; + display: -moz-box; + display: box; + + // 2012 + display: -webkit-flex; + display: -moz-flex; + display: -ms-flexbox; // 2011 (IE 10) + display: flex; + } + + @elseif $value == "inline-flex" { + display: -webkit-inline-box; + display: -moz-inline-box; + display: inline-box; + + display: -webkit-inline-flex; + display: -moz-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + } + + @else { + display: $value; + } +} + +// 2009 - box-flex (integer) +// 2011 - flex (decimal | width decimal) +// 2012 - flex (integer integer width) +@mixin flex($value) { + + // Grab flex-grow for older browsers. + $flex-grow: nth($value, 1); + + // 2009 + @include prefixer(box-flex, $flex-grow, webkit moz spec); + + // 2011 (IE 10), 2012 + @include prefixer(flex, $value, webkit moz ms spec); +} + +// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis) +// - box-direction (normal | reverse) +// 2011 - flex-direction (row | row-reverse | column | column-reverse) +// 2012 - flex-direction (row | row-reverse | column | column-reverse) +@mixin flex-direction($value: row) { + + // Alt values. + $value-2009: $value; + $value-2011: $value; + $direction: "normal"; + + @if $value == row { + $value-2009: horizontal; + } + + @elseif $value == "row-reverse" { + $value-2009: horizontal; + $direction: reverse; + } + + @elseif $value == column { + $value-2009: vertical; + } + + @elseif $value == "column-reverse" { + $value-2009: vertical; + $direction: reverse; + } + + // 2009 + @include prefixer(box-orient, $value-2009, webkit moz spec); + @if $direction == "reverse" { + @include prefixer(box-direction, $direction, webkit moz spec); + } + + // 2012 + @include prefixer(flex-direction, $value, webkit moz spec); + + // 2011 (IE 10) + -ms-flex-direction: $value; +} + +// 2009 - box-lines (single | multiple) +// 2011 - flex-wrap (nowrap | wrap | wrap-reverse) +// 2012 - flex-wrap (nowrap | wrap | wrap-reverse) +@mixin flex-wrap($value: nowrap) { + + // Alt values. + $alt-value: $value; + @if $value == nowrap { + $alt-value: single; + } + + @elseif $value == wrap { + $alt-value: multiple; + } + + @elseif $value == "wrap-reverse" { + $alt-value: multiple; + } + + @include prefixer(box-lines, $alt-value, webkit moz spec); + @include prefixer(flex-wrap, $value, webkit moz ms spec); +} + +// 2009 - TODO: parse values into flex-direction/flex-wrap +// 2011 - TODO: parse values into flex-direction/flex-wrap +// 2012 - flex-flow (flex-direction || flex-wrap) +@mixin flex-flow($value) { + @include prefixer(flex-flow, $value, webkit moz spec); +} + +// 2009 - box-ordinal-group (integer) +// 2011 - flex-order (integer) +// 2012 - order (integer) +@mixin order($int: 0) { + // 2009 + @include prefixer(box-ordinal-group, $int, webkit moz spec); + + // 2012 + @include prefixer(order, $int, webkit moz spec); + + // 2011 (IE 10) + -ms-flex-order: $int; +} + +// 2012 - flex-grow (number) +@mixin flex-grow($number: 0) { + @include prefixer(flex-grow, $number, webkit moz spec); + -ms-flex-positive: $number; +} + +// 2012 - flex-shrink (number) +@mixin flex-shrink($number: 1) { + @include prefixer(flex-shrink, $number, webkit moz spec); + -ms-flex-negative: $number; +} + +// 2012 - flex-basis (number) +@mixin flex-basis($width: auto) { + @include prefixer(flex-basis, $width, webkit moz spec); + -ms-flex-preferred-size: $width; +} + +// 2009 - box-pack (start | end | center | justify) +// 2011 - flex-pack (start | end | center | justify) +// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around) +@mixin justify-content ($value: flex-start) { + + // Alt values. + $alt-value: $value; + @if $value == "flex-start" { + $alt-value: start; + } + + @elseif $value == "flex-end" { + $alt-value: end; + } + + @elseif $value == "space-between" { + $alt-value: justify; + } + + @elseif $value == "space-around" { + $alt-value: center; + } + + // 2009 + @include prefixer(box-pack, $alt-value, webkit moz spec); + + // 2012 + @include prefixer(justify-content, $value, webkit moz ms o spec); + + // 2011 (IE 10) + -ms-flex-pack: $alt-value; +} + +// 2009 - box-align (start | end | center | baseline | stretch) +// 2011 - flex-align (start | end | center | baseline | stretch) +// 2012 - align-items (flex-start | flex-end | center | baseline | stretch) +@mixin align-items($value: stretch) { + + $alt-value: $value; + + @if $value == "flex-start" { + $alt-value: start; + } + + @elseif $value == "flex-end" { + $alt-value: end; + } + + // 2009 + @include prefixer(box-align, $alt-value, webkit moz spec); + + // 2012 + @include prefixer(align-items, $value, webkit moz ms o spec); + + // 2011 (IE 10) + -ms-flex-align: $alt-value; +} + +// 2011 - flex-item-align (auto | start | end | center | baseline | stretch) +// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch) +@mixin align-self($value: auto) { + + $value-2011: $value; + @if $value == "flex-start" { + $value-2011: start; + } + + @elseif $value == "flex-end" { + $value-2011: end; + } + + // 2012 + @include prefixer(align-self, $value, webkit moz spec); + + // 2011 (IE 10) + -ms-flex-item-align: $value-2011; +} + +// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch) +// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch) +@mixin align-content($value: stretch) { + + $value-2011: $value; + @if $value == "flex-start" { + $value-2011: start; + } + + @elseif $value == "flex-end" { + $value-2011: end; + } + + @elseif $value == "space-between" { + $value-2011: justify; + } + + @elseif $value == "space-around" { + $value-2011: distribute; + } + + // 2012 + @include prefixer(align-content, $value, webkit moz spec); + + // 2011 (IE 10) + -ms-flex-line-pack: $value-2011; +} + diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_font-face.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_font-face.scss new file mode 100644 index 0000000000..029ee8fe88 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_font-face.scss @@ -0,0 +1,23 @@ +// Order of the includes matters, and it is: normal, bold, italic, bold+italic. + +@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) { + @font-face { + font-family: $font-family; + font-weight: $weight; + font-style: $style; + + @if $asset-pipeline == true { + src: font-url('#{$file-path}.eot'); + src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'), + font-url('#{$file-path}.woff') format('woff'), + font-url('#{$file-path}.ttf') format('truetype'), + font-url('#{$file-path}.svg##{$font-family}') format('svg'); + } @else { + src: url('#{$file-path}.eot'); + src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), + url('#{$file-path}.woff') format('woff'), + url('#{$file-path}.ttf') format('truetype'), + url('#{$file-path}.svg##{$font-family}') format('svg'); + } + } +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_hidpi-media-query.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_hidpi-media-query.scss new file mode 100644 index 0000000000..111e4009b5 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_hidpi-media-query.scss @@ -0,0 +1,10 @@ +// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) +@mixin hidpi($ratio: 1.3) { + @media only screen and (-webkit-min-device-pixel-ratio: $ratio), + only screen and (min--moz-device-pixel-ratio: $ratio), + only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), + only screen and (min-resolution: #{round($ratio*96)}dpi), + only screen and (min-resolution: #{$ratio}dppx) { + @content; + } +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_hyphens.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_hyphens.scss new file mode 100644 index 0000000000..5f8bddafa5 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_hyphens.scss @@ -0,0 +1,4 @@ +@mixin hyphens($hyphenation: none) { +// none | manual | auto + @include prefixer(hyphens, $hyphenation, webkit moz ms spec); +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_image-rendering.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_image-rendering.scss new file mode 100644 index 0000000000..d4bac3ce0d --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_image-rendering.scss @@ -0,0 +1,13 @@ +@mixin image-rendering ($mode:auto) { + + @if ($mode == crisp-edges) { + image-rendering: -moz-crisp-edges; + image-rendering: -o-crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; + } + + @else { + image-rendering: $mode; + } +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_inline-block.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_inline-block.scss new file mode 100644 index 0000000000..3272a0010b --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_inline-block.scss @@ -0,0 +1,8 @@ +// Legacy support for inline-block in IE7 (maybe IE6) +@mixin inline-block { + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_keyframes.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_keyframes.scss new file mode 100644 index 0000000000..a9af53da4f --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_keyframes.scss @@ -0,0 +1,38 @@ +// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content +@mixin keyframes($name) { + $original-prefix-for-webkit: $prefix-for-webkit; + $original-prefix-for-mozilla: $prefix-for-mozilla; + $original-prefix-for-microsoft: $prefix-for-microsoft; + $original-prefix-for-opera: $prefix-for-opera; + $original-prefix-for-spec: $prefix-for-spec; + + @if $original-prefix-for-webkit { + @include disable-prefix-for-all(); + $prefix-for-webkit: true; + @-webkit-keyframes #{$name} { + @content; + } + } + @if $original-prefix-for-mozilla { + @include disable-prefix-for-all(); + $prefix-for-mozilla: true; + @-moz-keyframes #{$name} { + @content; + } + } + @if $original-prefix-for-spec { + @include disable-prefix-for-all(); + $prefix-for-spec: true; + // Chrome supports the standard keyframes syntax, but not the standard transform syntax + $prefix-for-webkit: true; + @keyframes #{$name} { + @content; + } + } + + $prefix-for-webkit: $original-prefix-for-webkit; + $prefix-for-mozilla: $original-prefix-for-mozilla; + $prefix-for-microsoft: $original-prefix-for-microsoft; + $prefix-for-opera: $original-prefix-for-opera; + $prefix-for-spec: $original-prefix-for-spec; +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_linear-gradient.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_linear-gradient.scss new file mode 100644 index 0000000000..e0da35128b --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_linear-gradient.scss @@ -0,0 +1,38 @@ +@mixin linear-gradient($pos, $G1, $G2: null, + $G3: null, $G4: null, + $G5: null, $G6: null, + $G7: null, $G8: null, + $G9: null, $G10: null, + $fallback: null) { + // Detect what type of value exists in $pos + $pos-type: type-of(nth($pos, 1)); + $pos-spec: null; + $pos-degree: null; + + // If $pos is missing from mixin, reassign vars and add default position + @if ($pos-type == color) or (nth($pos, 1) == "transparent") { + $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; + $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; + $pos: null; + } + + @if $pos { + $positions: _linear-positions-parser($pos); + $pos-degree: nth($positions, 1); + $pos-spec: nth($positions, 2); + } + + $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10; + + // Set $G1 as the default fallback color + $fallback-color: nth($G1, 1); + + // If $fallback is a color use that color as the fallback color + @if (type-of($fallback) == color) or ($fallback == "transparent") { + $fallback-color: $fallback; + } + + background-color: $fallback-color; + background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome + background-image: unquote("linear-gradient(#{$pos-spec}#{$full})"); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_perspective.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_perspective.scss new file mode 100644 index 0000000000..0e4deb80f3 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_perspective.scss @@ -0,0 +1,8 @@ +@mixin perspective($depth: none) { + // none | <length> + @include prefixer(perspective, $depth, webkit moz spec); +} + +@mixin perspective-origin($value: 50% 50%) { + @include prefixer(perspective-origin, $value, webkit moz spec); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_placeholder.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_placeholder.scss new file mode 100644 index 0000000000..22fd92b4f2 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_placeholder.scss @@ -0,0 +1,29 @@ +$placeholders: '-webkit-input-placeholder', + '-moz-placeholder', + '-ms-input-placeholder'; + +@mixin placeholder { + @each $placeholder in $placeholders { + @if $placeholder == "-webkit-input-placeholder" { + &::#{$placeholder} { + @content; + } + } + @else if $placeholder == "-moz-placeholder" { + // FF 18- + &:#{$placeholder} { + @content; + } + + // FF 19+ + &::#{$placeholder} { + @content; + } + } + @else { + &:#{$placeholder} { + @content; + } + } + } +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_radial-gradient.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_radial-gradient.scss new file mode 100644 index 0000000000..7a8c3765f1 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_radial-gradient.scss @@ -0,0 +1,39 @@ +// Requires Sass 3.1+ +@mixin radial-gradient($G1, $G2, + $G3: null, $G4: null, + $G5: null, $G6: null, + $G7: null, $G8: null, + $G9: null, $G10: null, + $pos: null, + $shape-size: null, + $fallback: null) { + + $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); + $G1: nth($data, 1); + $G2: nth($data, 2); + $pos: nth($data, 3); + $shape-size: nth($data, 4); + + $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10; + + // Strip deprecated cover/contain for spec + $shape-size-spec: _shape-size-stripper($shape-size); + + // Set $G1 as the default fallback color + $first-color: nth($full, 1); + $fallback-color: nth($first-color, 1); + + @if (type-of($fallback) == color) or ($fallback == "transparent") { + $fallback-color: $fallback; + } + + // Add Commas and spaces + $shape-size: if($shape-size, '#{$shape-size}, ', null); + $pos: if($pos, '#{$pos}, ', null); + $pos-spec: if($pos, 'at #{$pos}', null); + $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); + + background-color: $fallback-color; + background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); + background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_transform.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_transform.scss new file mode 100644 index 0000000000..8cc35963d5 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_transform.scss @@ -0,0 +1,15 @@ +@mixin transform($property: none) { +// none | <transform-function> + @include prefixer(transform, $property, webkit moz ms o spec); +} + +@mixin transform-origin($axes: 50%) { +// x-axis - left | center | right | length | % +// y-axis - top | center | bottom | length | % +// z-axis - length + @include prefixer(transform-origin, $axes, webkit moz ms o spec); +} + +@mixin transform-style ($style: flat) { + @include prefixer(transform-style, $style, webkit moz ms o spec); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_transition.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_transition.scss new file mode 100644 index 0000000000..fe18933fef --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_transition.scss @@ -0,0 +1,34 @@ +// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. +// Example: @include transition (all 2s ease-in-out); +// @include transition (opacity 1s ease-in 2s, width 2s ease-out); +// @include transition-property (transform, opacity); + +@mixin transition ($properties...) { + @if length($properties) >= 1 { + @include prefixer(transition, $properties, webkit moz spec); + } + + @else { + $properties: all 0.15s ease-out 0s; + @include prefixer(transition, $properties, webkit moz spec); + } +} + +@mixin transition-property ($properties...) { + -webkit-transition-property: transition-property-names($properties, 'webkit'); + -moz-transition-property: transition-property-names($properties, 'moz'); + transition-property: transition-property-names($properties, false); +} + +@mixin transition-duration ($times...) { + @include prefixer(transition-duration, $times, webkit moz spec); +} + +@mixin transition-timing-function ($motions...) { +// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() + @include prefixer(transition-timing-function, $motions, webkit moz spec); +} + +@mixin transition-delay ($times...) { + @include prefixer(transition-delay, $times, webkit moz spec); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_user-select.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_user-select.scss new file mode 100644 index 0000000000..1380aa8baa --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_user-select.scss @@ -0,0 +1,3 @@ +@mixin user-select($arg: none) { + @include prefixer(user-select, $arg, webkit moz ms spec); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_flex-grid.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_flex-grid.scss new file mode 100644 index 0000000000..3bbd866573 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_flex-grid.scss @@ -0,0 +1,39 @@ +// Flexible grid +@function flex-grid($columns, $container-columns: $fg-max-columns) { + $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($width / $container-width); +} + +// Flexible gutter +@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($gutter / $container-width); +} + +// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. +// This function takes the fluid grid equation (target / context = result) and uses columns to help define each. +// +// The calculation presumes that your column structure will be missing the last gutter: +// +// -- column -- gutter -- column -- gutter -- column +// +// $fg-column: 60px; // Column Width +// $fg-gutter: 25px; // Gutter Width +// $fg-max-columns: 12; // Total Columns For Main Container +// +// div { +// width: flex-grid(4); // returns (315px / 995px) = 31.65829%; +// margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%; +// +// p { +// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; +// float: left; +// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; +// } +// +// blockquote { +// float: left; +// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; +// } +// }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_golden-ratio.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_golden-ratio.scss new file mode 100644 index 0000000000..463d14a00c --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_golden-ratio.scss @@ -0,0 +1,3 @@ +@function golden-ratio($value, $increment) { + @return modular-scale($value, $increment, $golden) +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_grid-width.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_grid-width.scss new file mode 100644 index 0000000000..8e63d83d60 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_grid-width.scss @@ -0,0 +1,13 @@ +@function grid-width($n) { + @return $n * $gw-column + ($n - 1) * $gw-gutter; +} + +// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. +// +// $gw-column: 100px; // Column Width +// $gw-gutter: 40px; // Gutter Width +// +// div { +// width: grid-width(4); // returns 520px; +// margin-left: $gw-gutter; // returns 40px; +// } diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_linear-gradient.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_linear-gradient.scss new file mode 100644 index 0000000000..c8454d83f0 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_linear-gradient.scss @@ -0,0 +1,13 @@ +@function linear-gradient($pos, $gradients...) { + $type: linear; + $pos-type: type-of(nth($pos, 1)); + + // if $pos doesn't exist, fix $gradient + @if ($pos-type == color) or (nth($pos, 1) == "transparent") { + $gradients: zip($pos $gradients); + $pos: false; + } + + $type-gradient: $type, $pos, $gradients; + @return $type-gradient; +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_modular-scale.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_modular-scale.scss new file mode 100644 index 0000000000..0a7185916c --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_modular-scale.scss @@ -0,0 +1,66 @@ +// Scaling Varaibles +$golden: 1.618; +$minor-second: 1.067; +$major-second: 1.125; +$minor-third: 1.2; +$major-third: 1.25; +$perfect-fourth: 1.333; +$augmented-fourth: 1.414; +$perfect-fifth: 1.5; +$minor-sixth: 1.6; +$major-sixth: 1.667; +$minor-seventh: 1.778; +$major-seventh: 1.875; +$octave: 2; +$major-tenth: 2.5; +$major-eleventh: 2.667; +$major-twelfth: 3; +$double-octave: 4; + +@function modular-scale($value, $increment, $ratio) { + $v1: nth($value, 1); + $v2: nth($value, length($value)); + $value: $v1; + + // scale $v2 to just above $v1 + @while $v2 > $v1 { + $v2: ($v2 / $ratio); // will be off-by-1 + } + @while $v2 < $v1 { + $v2: ($v2 * $ratio); // will fix off-by-1 + } + + // check AFTER scaling $v2 to prevent double-counting corner-case + $double-stranded: $v2 > $v1; + + @if $increment > 0 { + @for $i from 1 through $increment { + @if $double-stranded and ($v1 * $ratio) > $v2 { + $value: $v2; + $v2: ($v2 * $ratio); + } @else { + $v1: ($v1 * $ratio); + $value: $v1; + } + } + } + + @if $increment < 0 { + // adjust $v2 to just below $v1 + @if $double-stranded { + $v2: ($v2 / $ratio); + } + + @for $i from $increment through -1 { + @if $double-stranded and ($v1 / $ratio) < $v2 { + $value: $v2; + $v2: ($v2 / $ratio); + } @else { + $v1: ($v1 / $ratio); + $value: $v1; + } + } + } + + @return $value; +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_px-to-em.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_px-to-em.scss new file mode 100644 index 0000000000..4832245e45 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_px-to-em.scss @@ -0,0 +1,13 @@ +// Convert pixels to ems +// eg. for a relational value of 12px write em(12) when the parent is 16px +// if the parent is another value say 24px write em(12, 24) + +@function em($pxval, $base: $em-base) { + @if not unitless($pxval) { + $pxval: strip-units($pxval); + } + @if not unitless($base) { + $base: strip-units($base); + } + @return ($pxval / $base) * 1em; +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_radial-gradient.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_radial-gradient.scss new file mode 100644 index 0000000000..4466a9c9af --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_radial-gradient.scss @@ -0,0 +1,23 @@ +// This function is required and used by the background-image mixin. +@function radial-gradient($G1, $G2, + $G3: null, $G4: null, + $G5: null, $G6: null, + $G7: null, $G8: null, + $G9: null, $G10: null, + $pos: null, + $shape-size: null) { + + $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); + $G1: nth($data, 1); + $G2: nth($data, 2); + $pos: nth($data, 3); + $shape-size: nth($data, 4); + + $type: radial; + $gradient: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10; + + $type-gradient: $type, $shape-size $pos, $gradient; + @return $type-gradient; +} + + diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_strip-units.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_strip-units.scss new file mode 100644 index 0000000000..6afc6e601c --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_strip-units.scss @@ -0,0 +1,5 @@ +// Srtips the units from a value. e.g. 12px -> 12 + +@function strip-units($val) { + @return ($val / ($val * 0 + 1)); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_tint-shade.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_tint-shade.scss new file mode 100644 index 0000000000..f7172004ac --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_tint-shade.scss @@ -0,0 +1,9 @@ +// Add percentage of white to a color +@function tint($color, $percent){ + @return mix(white, $color, $percent); +} + +// Add percentage of black to a color +@function shade($color, $percent){ + @return mix(black, $color, $percent); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_transition-property-name.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_transition-property-name.scss new file mode 100644 index 0000000000..111deeb70f --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_transition-property-name.scss @@ -0,0 +1,22 @@ +// Return vendor-prefixed property names if appropriate +// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background +//************************************************************************// +@function transition-property-names($props, $vendor: false) { + $new-props: (); + + @each $prop in $props { + $new-props: append($new-props, transition-property-name($prop, $vendor), comma); + } + + @return $new-props; +} + +@function transition-property-name($prop, $vendor: false) { + // put other properties that need to be prefixed here aswell + @if $vendor and $prop == transform { + @return unquote('-'+$vendor+'-'+$prop); + } + @else { + @return $prop; + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_unpack.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_unpack.scss new file mode 100644 index 0000000000..377596365c --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_unpack.scss @@ -0,0 +1,17 @@ +// Convert shorthand to the 4-value syntax + +@function unpack($shorthand) { + @if length($shorthand) == 1 { + @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); + } + @else if length($shorthand) == 2 { + @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); + } + @else if length($shorthand) == 3 { + @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); + } + @else { + @return $shorthand; + } +} + diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_gradient-positions-parser.scss b/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_gradient-positions-parser.scss new file mode 100644 index 0000000000..07d30b6cf9 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_gradient-positions-parser.scss @@ -0,0 +1,13 @@ +@function _gradient-positions-parser($gradient-type, $gradient-positions) { + @if $gradient-positions + and ($gradient-type == linear) + and (type-of($gradient-positions) != color) { + $gradient-positions: _linear-positions-parser($gradient-positions); + } + @else if $gradient-positions + and ($gradient-type == radial) + and (type-of($gradient-positions) != color) { + $gradient-positions: _radial-positions-parser($gradient-positions); + } + @return $gradient-positions; +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_linear-positions-parser.scss b/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_linear-positions-parser.scss new file mode 100644 index 0000000000..d26383edce --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_linear-positions-parser.scss @@ -0,0 +1,61 @@ +@function _linear-positions-parser($pos) { + $type: type-of(nth($pos, 1)); + $spec: null; + $degree: null; + $side: null; + $corner: null; + $length: length($pos); + // Parse Side and corner positions + @if ($length > 1) { + @if nth($pos, 1) == "to" { // Newer syntax + $side: nth($pos, 2); + + @if $length == 2 { // eg. to top + // Swap for backwards compatability + $degree: _position-flipper(nth($pos, 2)); + } + @else if $length == 3 { // eg. to top left + $corner: nth($pos, 3); + } + } + @else if $length == 2 { // Older syntax ("top left") + $side: _position-flipper(nth($pos, 1)); + $corner: _position-flipper(nth($pos, 2)); + } + + @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + $spec: to $side $corner; + } + @else if $length == 1 { + // Swap for backwards compatability + @if $type == string { + $degree: $pos; + $spec: to _position-flipper($pos); + } + @else { + $degree: -270 - $pos; //rotate the gradient opposite from spec + $spec: $pos; + } + } + $degree: unquote($degree + ","); + $spec: unquote($spec + ","); + @return $degree $spec; +} + +@function _position-flipper($pos) { + @return if($pos == left, right, null) + if($pos == right, left, null) + if($pos == top, bottom, null) + if($pos == bottom, top, null); +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_radial-arg-parser.scss b/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_radial-arg-parser.scss new file mode 100644 index 0000000000..a3a3704af5 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_radial-arg-parser.scss @@ -0,0 +1,69 @@ +@function _radial-arg-parser($G1, $G2, $pos, $shape-size) { + @each $value in $G1, $G2 { + $first-val: nth($value, 1); + $pos-type: type-of($first-val); + $spec-at-index: null; + + // Determine if spec was passed to mixin + @if type-of($value) == list { + $spec-at-index: if(index($value, at), index($value, at), false); + } + @if $spec-at-index { + @if $spec-at-index > 1 { + @for $i from 1 through ($spec-at-index - 1) { + $shape-size: $shape-size nth($value, $i); + } + @for $i from ($spec-at-index + 1) through length($value) { + $pos: $pos nth($value, $i); + } + } + @else if $spec-at-index == 1 { + @for $i from ($spec-at-index + 1) through length($value) { + $pos: $pos nth($value, $i); + } + } + $G1: null; + } + + // If not spec calculate correct values + @else { + @if ($pos-type != color) or ($first-val != "transparent") { + @if ($pos-type == number) + or ($first-val == "center") + or ($first-val == "top") + or ($first-val == "right") + or ($first-val == "bottom") + or ($first-val == "left") { + + $pos: $value; + + @if $pos == $G1 { + $G1: null; + } + } + + @else if + ($first-val == "ellipse") + or ($first-val == "circle") + or ($first-val == "closest-side") + or ($first-val == "closest-corner") + or ($first-val == "farthest-side") + or ($first-val == "farthest-corner") + or ($first-val == "contain") + or ($first-val == "cover") { + + $shape-size: $value; + + @if $value == $G1 { + $G1: null; + } + + @else if $value == $G2 { + $G2: null; + } + } + } + } + } + @return $G1, $G2, $pos, $shape-size; +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_radial-positions-parser.scss b/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_radial-positions-parser.scss new file mode 100644 index 0000000000..6a5b477778 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_radial-positions-parser.scss @@ -0,0 +1,18 @@ +@function _radial-positions-parser($gradient-pos) { + $shape-size: nth($gradient-pos, 1); + $pos: nth($gradient-pos, 2); + $shape-size-spec: _shape-size-stripper($shape-size); + + $pre-spec: unquote(if($pos, "#{$pos}, ", null)) + unquote(if($shape-size, "#{$shape-size},", null)); + $pos-spec: if($pos, "at #{$pos}", null); + + $spec: "#{$shape-size-spec} #{$pos-spec}"; + + // Add comma + @if ($spec != ' ') { + $spec: "#{$spec}," + } + + @return $pre-spec $spec; +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_render-gradients.scss b/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_render-gradients.scss new file mode 100644 index 0000000000..5765676838 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_render-gradients.scss @@ -0,0 +1,26 @@ +// User for linear and radial gradients within background-image or border-image properties + +@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { + $pre-spec: null; + $spec: null; + $vendor-gradients: null; + @if $gradient-type == linear { + @if $gradient-positions { + $pre-spec: nth($gradient-positions, 1); + $spec: nth($gradient-positions, 2); + } + } + @else if $gradient-type == radial { + $pre-spec: nth($gradient-positions, 1); + $spec: nth($gradient-positions, 2); + } + + @if $vendor { + $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); + } + @else if $vendor == false { + $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; + $vendor-gradients: unquote($vendor-gradients); + } + @return $vendor-gradients; +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_shape-size-stripper.scss b/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_shape-size-stripper.scss new file mode 100644 index 0000000000..ee5eda4220 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_shape-size-stripper.scss @@ -0,0 +1,10 @@ +@function _shape-size-stripper($shape-size) { + $shape-size-spec: null; + @each $value in $shape-size { + @if ($value == "cover") or ($value == "contain") { + $value: null; + } + $shape-size-spec: "#{$shape-size-spec} #{$value}"; + } + @return $shape-size-spec; +} diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/settings/_prefixer.scss b/WebContent/VAADIN/themes/valo/util/bourbon/settings/_prefixer.scss new file mode 100644 index 0000000000..c29a961919 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/settings/_prefixer.scss @@ -0,0 +1,6 @@ +// Variable settings for /addons/prefixer.scss +$prefix-for-webkit: true; +$prefix-for-mozilla: true; +$prefix-for-microsoft: true; +$prefix-for-opera: true; +$prefix-for-spec: true; // required for keyframe mixin diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/settings/_px-to-em.scss b/WebContent/VAADIN/themes/valo/util/bourbon/settings/_px-to-em.scss new file mode 100644 index 0000000000..f2f9a3e8de --- /dev/null +++ b/WebContent/VAADIN/themes/valo/util/bourbon/settings/_px-to-em.scss @@ -0,0 +1 @@ +$em-base: 16px !default; diff --git a/WebContent/license.html b/WebContent/license.html index e1b0bed54a..f714e4d64d 100644 --- a/WebContent/license.html +++ b/WebContent/license.html @@ -132,14 +132,44 @@ </tr> <!-- Used by font icons --> <tr> - <td>FontAwesome</td> + <td title="Custom web font">FontAwesome</td> <td><a href="licenses/OFL.txt">SIL OFL 1.1</a></td> </tr> - <!-- The extracted vaadin-sass-compiler --> + <!-- Included in the Valo theme --> + <tr> + <td title="Custom web font">Open Sans</td> + <td><a href="licenses/apache-license-version-2-0.txt">Apache License, version 2.0</a></td> + </tr> + <tr> + <td title="Custom web font">Roboto</td> + <td><a href="licenses/apache-license-version-2-0.txt">Apache License, version 2.0</a></td> + </tr> + <tr> + <td title="Custom web font">Roboto Condensed</td> + <td><a href="licenses/apache-license-version-2-0.txt">Apache License, version 2.0</a></td> + </tr> + <tr> + <td title="Custom web font">Source Sans Pro</td> + <td><a href="licenses/OFL.txt">SIL OFL 1.1</a></td> + </tr> + <tr> + <td title="Custom web font">Lato</td> + <td><a href="licenses/OFL.txt">SIL OFL 1.1</a></td> + </tr> + <tr> + <td title="Custom web font">Lora</td> + <td><a href="licenses/OFL.txt">SIL OFL 1.1</a></td> + </tr> + <!-- The extracted vaadin-sass-compiler --> <tr> <td>Vaadin Sass Compiler</td> <td><a href="licenses/apache-license-version-2-0.txt">Apache License, Version 2.0</a></td> </tr> + <!-- Bourbon sass library --> + <tr> + <td>Bourbon</td> + <td><a href="licenses/the-mit-license.txt">The MIT License</a></td> + </tr> </tbody> </table> diff --git a/WebContent/release-notes.html b/WebContent/release-notes.html index baa91232b2..c90bc0159a 100644 --- a/WebContent/release-notes.html +++ b/WebContent/release-notes.html @@ -45,12 +45,10 @@ @version@</a></li> <li><a href="#enhancements">Enhancements in Vaadin @version-minor@</a></li> - <li><a href="#incompatible">Incompatible changes in - @version-minor@</a></li> - <li><a href="#behavioraltering">Behavior altering - changes in @version-minor@</a></li> + <li><a href="#incompatible">Incompatible or behavior-altering changes in + @version-minor@</a></li> <li><a href="#knownissues">Known issues in - @version-minor@</a></li> + @version-minor@</a></li> <li><a href="#limitations">Limitations in @version-minor@</a></li> <li><a href="#vaadin">Vaadin Installation</a></li> @@ -93,75 +91,42 @@ of the closed issues</a> at the Vaadin developer's site. </p> - <h2 id="enhancements">Enhancements in Vaadin - @version-minor@</h2> + <h2 id="enhancements">Enhancements in Vaadin @version-minor@</h2> <p>The @version-minor@ includes many major and minor enhancements. Below is a list of the most notable changes:</p> <ul> - <li>Internet Explorer 11 support</li> - <li>Window Phone 8.1 support</li> - <li>Long polling support through Atmosphere 2</li> - <li>Font icon support</li> - <li>Tomcat 8 support</li> - <li>Wildfly 8 support</li> - <li>Websocket support for Tomcat 8, Glassfish 4, Jetty 9.1, Wildfly 8</li> - <li>TestBench 4 support</li> - <li>GWT 2.6 compatibility</li> - <li>Widget set size reduction</li> - <li>Widget set compilation speed improvement by collapsing all permutations</li> - <li>New built-in converters: StringToBigDecimal, StringToLong</li> - <li>New built-in support for Date in communication</li> - <li>WAI-ARIA improvements: Window, Notification, TabSheet</li> - <li>Sass compiler is a separate project</li> - <li>Support for @OnStateChange for easier state handling</li> - <li>Reload events for UIs with @PreserveOnRefresh</li> - <li>Responsive layouts</li> + <li>Valo is a brand new built-in theme for Vaadin. It leverages + the Sass CSS preprocessor heavily, + providing a variety of ways to customize the look and feel of your theme. + See <a href="https://vaadin.com/wiki/-/wiki/Main/Valo+theme+-+Getting+started">the Valo theme tutorial</a> or <a href="https://vaadin.com/book/-/page/themes.valo.html">the Valo theme section</a> in Book of Vaadin for information on how to get started.</li> + <li>Support for changing theme on the fly</li> </ul> <p> - For enchancements introduced in Vaadin 7, see the <a - href="http://vaadin.com/download/release/7.0/7.0.0/release-notes.html">Release - Notes for Vaadin 7.0.0</a>. + For enhancements introduced in Vaadin 7.2, see the <a + href="http://vaadin.com/download/release/7.2/7.2.0/release-notes.html">Release + Notes for Vaadin 7.2.0</a>. </p> - <h3 id="incompatible">Incompatible changes</h3> + <h3 id="incompatible">Incompatible or behavior-altering changes in @version-minor@</h3> <ul> - <li>It is assumed that the UI will no longer be used after Page.setLocation - is called. Do not use this to start downloads.</li> - <li>The portlet requests class VaadinGateinRequest is now called - VaadinGateInRequest</li> - <li>The JSON library has been changed from org.json to the json implementation - from the Android SDK. They are 99% compatible.</li> - <li>StringToNumberConverter has been removed in favor of more specific - converters such as StringToBigDecimalConverter.</li> - <li>There is no longer support for "multiple variable bursts" - in the UIDL communication.</li> - </ul> - <h3 id="behavioraltering">Behavior altering changes</h3> - <ul> - <li>Default push fallback is now long-polling</li> - <li>VerticalLayout and HorizontalLayout.replaceComponent now applies old - component parameters (e.g. expand ratio) to the new component. This is - now consistent between all layouts in the framework, where relevant - properties are applied to the replacement.</li> - <li>All GWT permutations are collapsed when using DefaultWidgetSet. To use - separate permutations, inherit Vaadin instead of DefaultWidgetSet and - add the needed entry-point.</li> - <li>Requests to "/context;jsessionid=xyz" are redirected to - "/context/;jsessionid=xyz" which is against specifications but based - on how jsessionid is used</li> - <li>Adding a ValueChangeListener to a component will make it immediate</li> - <li>ComboBox is immediate by default</li> + <li> + <p>The shadow of all overlays (VOverlay) are now implemented with CSS box-shadow in all browsers except Internet Explorer 8 (<a href="http://dev.vaadin.com/ticket/9303">#9303</a>). + In IE8 the old image-based implementation is still used. + </p><p> + The image-based shadow implementation is also deprecated, so if you have any custom shadow implementations in your themes or add-ons, + please update them accordingly to use CSS box-shadow instead. + </p><p> + Note that the CSS-based implementation is visually not 100% identical to the old implementation. This should not cause issues except + if you are using screenshot-based TestBench tests or similar visual regression tests. + </p> + </li> + <li>The theme for the debug window is now implemented using a GWT client bundle and is no longer included in the standard theme.</li> </ul> - <h3 id="knownissues">Known issues</h3> <ul> - <li>Reconnecting a dropped push connection sometimes fails when using - Firefox and streaming or long polling. - (<a href="http://dev.vaadin.com/ticket/13578">#13578</a>) - </li> <li>Drag'n'drop in a Table doesn't work on touch devices running Internet Explorer (Windows Phone, Surface) (<a href="http://dev.vaadin.com/ticket/13737">#13737</a>) @@ -170,10 +135,13 @@ <h3 id="limitations">Limitations</h3> <ul> - <li>It is currently not possible to specify <tt>font-size</tt> + <li><p>It is currently not possible to specify <tt>font-size</tt> as <tt>em</tt> or <tt>%</tt>, or layout component sizes with <tt>em</tt> (<a - href="http://dev.vaadin.com/ticket/10634">#10634</a>) + href="http://dev.vaadin.com/ticket/10634">#10634</a>).</p><p>This + does not apply to Valo, but using em sizes to size layouts is discouraged, + because it results in fractional component sizes in many cases, which + might cause unwanted 1px gaps between components.</p> </li> <li>Push is currently not supported in portals (See <a href="http://dev.vaadin.com/ticket/11493">#11493</a>) diff --git a/build.properties b/build.properties index 1c8268ee47..a7871ad1ef 100644 --- a/build.properties +++ b/build.properties @@ -5,6 +5,6 @@ vaadin.vendor=Vaadin Ltd vaadin.url=http://vaadin.com vaadin.java.version=1.6 vaadin.version=0.0.0.unversioned-development-build -vaadin.sass.version=0.9.6 +vaadin.sass.version=0.9.7 gwt.version=2.6.0.vaadin3 commons-io.version=2.4 diff --git a/build/ide.xml b/build/ide.xml index 525e16d88d..0775a67505 100755 --- a/build/ide.xml +++ b/build/ide.xml @@ -53,6 +53,9 @@ <antcall target="compile-theme"> <param name="theme" value="liferay" /> </antcall> + <antcall target="compile-theme"> + <param name="theme" value="valo" /> + </antcall> </target> <target name="compile-theme"> diff --git a/buildhelpers/src/com/vaadin/buildhelpers/CompileTheme.java b/buildhelpers/src/com/vaadin/buildhelpers/CompileTheme.java index 0fa4a7e8ab..d97025bdb6 100644 --- a/buildhelpers/src/com/vaadin/buildhelpers/CompileTheme.java +++ b/buildhelpers/src/com/vaadin/buildhelpers/CompileTheme.java @@ -73,9 +73,14 @@ public class CompileTheme { } // Legacy theme w/o .themename{} wrapping try { - processSassTheme(themeFolder, themeName, "legacy-styles", version); - System.out.println("Compiling theme " + themeName - + " legacy-styles successful"); + String legacyFile = themeFolder + File.separator + themeName + + File.separator + "legacy-styles.scss"; + if (new File(legacyFile).exists()) { + processSassTheme(themeFolder, themeName, "legacy-styles", + version); + System.out.println("Compiling theme " + themeName + + " legacy-styles successful"); + } } catch (Exception e) { System.err.println("Compiling theme " + themeName + " legacy-styles failed"); diff --git a/client/src/com/vaadin/client/AnimationUtil.java b/client/src/com/vaadin/client/AnimationUtil.java new file mode 100644 index 0000000000..2077cee3c0 --- /dev/null +++ b/client/src/com/vaadin/client/AnimationUtil.java @@ -0,0 +1,178 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.client; + +import com.google.gwt.core.client.JavaScriptObject; +import com.google.gwt.dom.client.Element; +import com.google.gwt.dom.client.NativeEvent; +import com.google.gwt.dom.client.Style; + +/** + * Utility methods for working with CSS transitions and animations. + * + * @author Vaadin Ltd + */ +public class AnimationUtil { + + /** + * For internal use only. May be removed or replaced in the future. + * + * Set the animation-duration CSS property. + * + * @param elem + * the element whose animation-duration to set + * @param duration + * the duration as a valid CSS value + */ + public static void setAnimationDuration(Element elem, String duration) { + Style style = elem.getStyle(); + style.setProperty(ANIMATION_PROPERTY_NAME + "Duration", duration); + } + + /** + * For internal use only. May be removed or replaced in the future. + * + * Set the animation-delay CSS property. + * + * @param elem + * the element whose animation-delay to set + * @param delay + * the delay as a valid CSS value + */ + public static void setAnimationDelay(Element elem, String delay) { + Style style = elem.getStyle(); + style.setProperty(ANIMATION_PROPERTY_NAME + "Delay", delay); + } + + /** For internal use only. May be removed or replaced in the future. */ + public static native JavaScriptObject addAnimationEndListener(Element elem, + AnimationEndListener listener) + /*-{ + var callbackFunc = $entry(function(e) { + listener.@com.vaadin.client.AnimationUtil.AnimationEndListener::onAnimationEnd(Lcom/google/gwt/dom/client/NativeEvent;)(e); + }); + + elem.addEventListener(@com.vaadin.client.AnimationUtil::ANIMATION_END_EVENT_NAME, callbackFunc, false); + + // Store function reference for later removal + if(!elem._vaadin_animationend_callbacks) { + elem._vaadin_animationend_callbacks = []; + } + elem._vaadin_animationend_callbacks.push(callbackFunc); + + return callbackFunc; + }-*/; + + /** For internal use only. May be removed or replaced in the future. */ + public static native void removeAnimationEndListener(Element elem, + JavaScriptObject listener) + /*-{ + elem.removeEventListener(@com.vaadin.client.AnimationUtil::ANIMATION_END_EVENT_NAME, listener, false); + }-*/; + + /** For internal use only. May be removed or replaced in the future. */ + public static native void removeAllAnimationEndListeners(Element elem) + /*-{ + if(elem._vaadin_animationend_callbacks) { + var callbacks = elem._vaadin_animationend_callbacks; + for(var i=0; i < callbacks.length; i++) { + elem.removeEventListener(@com.vaadin.client.AnimationUtil::ANIMATION_END_EVENT_NAME, callbacks[i], false); + } + } + }-*/; + + /** For internal use only. May be removed or replaced in the future. */ + public interface AnimationEndListener { + public void onAnimationEnd(NativeEvent event); + } + + /** For internal use only. May be removed or replaced in the future. */ + public static native String getAnimationName(NativeEvent event) + /*-{ + if(event.webkitAnimationName) + return event.webkitAnimationName; + else if(event.animationName) + return event.animationName; + else if(event.mozAnimationName) + return event.mozAnimationName; + else if(event.oAnimationName) + return event.oAnimationName; + + return ""; + }-*/; + + /** For internal use only. May be removed or replaced in the future. */ + public static native String getAnimationName(ComputedStyle cstyle) + /*-{ + var cs = cstyle.@com.vaadin.client.ComputedStyle::computedStyle; + + if(!cs.getPropertyValue) + return ""; + + if(cs.getPropertyValue("-webkit-animation-name")) + return cs.getPropertyValue("-webkit-animation-name"); + + else if(cs.getPropertyValue("animation-name")) + return cs.getPropertyValue("animation-name"); + + else if(cs.getPropertyValue("-moz-animation-name")) + return cs.getPropertyValue("-moz-animation-name"); + + else if(cs.getPropertyValue("-o-animation-name")) + return cs.getPropertyValue("-o-animation-name"); + + return ""; + }-*/; + + private static final String ANIMATION_END_EVENT_NAME = whichAnimationEndEvent(); + + private static native String whichAnimationEndEvent() + /*-{ + var el = document.createElement('fakeelement'); + var anims = { + 'animationName': 'animationend', + 'OAnimationName': 'oAnimationEnd', + 'MozAnimation': 'animationend', + 'WebkitAnimation': 'webkitAnimationEnd' + } + + for(var a in anims){ + if( el.style[a] !== undefined ){ + return anims[a]; + } + } + }-*/; + + private static final String ANIMATION_PROPERTY_NAME = whichAnimationProperty(); + + private static native String whichAnimationProperty() + /*-{ + var el = document.createElement('fakeelement'); + var anims = [ + 'animation', + 'oAnimation', + 'mozAnimation', + 'webkitAnimation' + ] + + for(var i=0; i < anims.length; i++) { + if( el.style[anims[i]] !== undefined ){ + return anims[i]; + } + } + }-*/; + +} diff --git a/client/src/com/vaadin/client/ApplicationConfiguration.java b/client/src/com/vaadin/client/ApplicationConfiguration.java index a1f1513d58..0d17fbd94f 100644 --- a/client/src/com/vaadin/client/ApplicationConfiguration.java +++ b/client/src/com/vaadin/client/ApplicationConfiguration.java @@ -29,6 +29,7 @@ import com.google.gwt.core.client.GWT; import com.google.gwt.core.client.GWT.UncaughtExceptionHandler; import com.google.gwt.core.client.JavaScriptObject; import com.google.gwt.core.client.JsArrayString; +import com.google.gwt.core.client.RunAsyncCallback; import com.google.gwt.core.client.Scheduler; import com.google.gwt.core.client.Scheduler.ScheduledCommand; import com.google.gwt.logging.client.LogConfiguration; @@ -43,6 +44,7 @@ import com.vaadin.client.debug.internal.ProfilerSection; import com.vaadin.client.debug.internal.Section; import com.vaadin.client.debug.internal.TestBenchSection; import com.vaadin.client.debug.internal.VDebugWindow; +import com.vaadin.client.debug.internal.theme.DebugWindowStyles; import com.vaadin.client.event.PointerEventSupport; import com.vaadin.client.metadata.BundleLoadCallback; import com.vaadin.client.metadata.ConnectorBundleLoader; @@ -642,6 +644,21 @@ public class ApplicationConfiguration implements EntryPoint { if (isQuietDebugMode()) { window.close(); } else { + // Load debug window styles asynchronously + GWT.runAsync(new RunAsyncCallback() { + @Override + public void onSuccess() { + DebugWindowStyles dws = GWT + .create(DebugWindowStyles.class); + dws.css().ensureInjected(); + } + + @Override + public void onFailure(Throwable reason) { + Window.alert("Failed to load Vaadin debug window styles"); + } + }); + window.init(); } diff --git a/client/src/com/vaadin/client/debug/internal/theme/DebugWindowStyles.java b/client/src/com/vaadin/client/debug/internal/theme/DebugWindowStyles.java new file mode 100644 index 0000000000..249b24a938 --- /dev/null +++ b/client/src/com/vaadin/client/debug/internal/theme/DebugWindowStyles.java @@ -0,0 +1,49 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.client.debug.internal.theme; + +import com.google.gwt.resources.client.ClientBundle; +import com.google.gwt.resources.client.CssResource; +import com.google.gwt.resources.client.CssResource.NotStrict; +import com.google.gwt.resources.client.DataResource; +import com.google.gwt.resources.client.DataResource.DoNotEmbed; + +public interface DebugWindowStyles extends ClientBundle { + + @Source({ "debugwindow.css" }) + @NotStrict + public CssResource css(); + + // Can't embed because IE8 doesn't support datauri for fonts (images only) + @Source("font.eot") + @DoNotEmbed + DataResource iconFontEot(); + + // Can't embed because GWT compiler doesn't know the mimetype for these + // (ends up as content/unknown) + @Source("font.ttf") + @DoNotEmbed + DataResource iconFontTtf(); + + @Source("font.woff") + @DoNotEmbed + DataResource iconFontWoff(); + + @Source("font.svg") + @DoNotEmbed + DataResource iconFontSvg(); + +}
\ No newline at end of file diff --git a/client/src/com/vaadin/client/debug/internal/theme/debugwindow.css b/client/src/com/vaadin/client/debug/internal/theme/debugwindow.css new file mode 100644 index 0000000000..78e537140e --- /dev/null +++ b/client/src/com/vaadin/client/debug/internal/theme/debugwindow.css @@ -0,0 +1,322 @@ +.v-debug-console { + background: #fff; + opacity: .9; + border: 1px solid #000; + font-family: sans-serif; +} + +.v-debug-console-caption { + background: #000; + border-bottom: 1px solid grey; + color: white; + font-weight: bold; +} + +.v-debug-console-content { + font-size: x-small; + overflow: auto; + white-space: pre; +} + +.v-debug-console-content input { + font-size: xx-small; +} + +/* Debug style */ +.v-app .invalidlayout, +.v-app .invalidlayout * { + background: #f99 !important; +} + +/* NEW debug window */ + +@def mainbg #fff; +@def darkborder #666; +@def lightborder #999; +@def maincolor #666; +@def maincolor-lighten-5pc #737373; +@def maincolor-lighten-10pc gray; +@def maincolor-lighten-15pc #8c8c8c; +@def activecolor #000; + +@url urlForTtf iconFontTtf; +@url urlForWoff iconFontWoff; +@url urlForEot iconFontEot; +@url urlForSvg iconFontSvg; + +@font-face { + font-family: 'vdebugfont'; + src: urlForEot; +} + +@font-face { + font-family: 'vdebugfont'; + src: urlForWoff format('woff'), + urlForTtf format('truetype'), + urlForSvg format('svg'); + font-weight: normal; + font-style: normal; +} + +.v-debugwindow [data-icon]:before, +.v-debugwindow-menu [data-icon]:before { + font-family: 'vdebugfont'; + content: attr(data-icon); + speak: none; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + font-style: normal; + vertical-align: text-bottom; +} + +.v-debugwindow { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + opacity: .8; + color: maincolor; + font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; + font-size: 13px; +} + +.v-debugwindow-handle { + position: absolute; + bottom: 0; + background-color: #fff; + opacity: 0; + z-index: 1000; +} + +.v-debugwindow-handle-sw { + width: 7px; + height: 7px; +} + +.v-debugwindow-handle-se { + right: 0; + width: 14px; + height: 14px; +} + +.v-debugwindow:hover { + opacity: 1; +} + +.v-debugwindow * { + font-size: inherit !important; +} + +.v-debugwindow-size0, .v-debugwindow-menu .v-debugwindow-button-size0 { + font-size: 10px; +} + +.v-debugwindow-size1, .v-debugwindow-menu .v-debugwindow-button-size1 { + font-size: 13px; +} + +.v-debugwindow-size2, .v-debugwindow-menu .v-debugwindow-button-size2 { + font-size: 16px; +} + +.v-debugwindow-head { + text-align: right; + background-color: transparent; +} + +.v-debugwindow-tabs { + display: inline-block; +} + +.v-debugwindow-tab, .v-debugwindow-controls > * { + width: 2em; + border: none; + margin: 0; + line-height: 1.5em; + background-color: mainbg; + color: maincolor; +} + +.v-debugwindow-tab { + position: relative; + top: 1px; + border-width: 1px 0 1px 1px; + border-style: solid; + border-color: darkborder; + border-radius: 2px 2px 0 0; +} + +.v-debugwindow-tab-selected { + color: maincolor; + background-color: mainbg; + border-bottom: 1px solid #fff; +} + +.v-debugwindow-controls { + position: relative; + top: 1px; + display: inline-block; + background-color: mainbg; + border: 1px solid darkborder; + border-radius: 2px 2px 0 0; +} + +.v-debugwindow-section-head { + text-align: left; + background-color: mainbg; + border: 1px solid darkborder; + border-bottom: 1px solid lightborder; + box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); + min-height: 1.5em; + line-height: 1.5em; + padding-left: 5px; +} + +.v-debugwindow-button { + border: none; + background-color: transparent; + color: maincolor; +} + +.v-debugwindow-button:hover { + color: activecolor; + text-decoration: underline; +} + +.v-debugwindow-button-active { + color: maincolor; + box-shadow: 1px 1px 3px 0 inset; +} + +.v-debugwindow-content { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); + background-color: mainbg; + border: 1px solid darkborder; + border-top: none; +} + +.v-debugwindow-menu { + background-color: mainbg; + padding: 4px; + border: 1px solid lightborder; + border-top: none; + border-radius: 0 0 5px 5px; + box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); +} + +.v-debugwindow-menu-content { + min-width: 100px; +} + +.v-debugwindow-menu-content .v-debugwindow-button { + line-height: 22px; +} + +.v-debugwindow-menu-content > div > .v-debugwindow-button { + width: 33%; +} + +/* GLOBAL color every other row */ +.v-debugwindow-row { + display: table-row; +} + +/* Escape function signature so that this gets past GWT compiler */ +.v-debugwindow-row:nth-child\(odd\) { + background-color: rgba(0, 61, 255, 0.11); +} + +.v-debugwindow-row > span { + display: table-cell; + padding: 4px; +} + +.v-debugwindow-row.SEVERE { + color: #550000; + background-color: #FFC5C5; +} + +.v-debugwindow-row.WARNING { + background-color: #FFFF99; +} + +.v-debugwindow-row.FINE { + color: maincolor-lighten-5pc; +} + +.v-debugwindow-row.FINER { + color: maincolor-lighten-10pc; +} + +.v-debugwindow-row.FINEST { + color: maincolor-lighten-15pc; +} + +.v-debugwindow-row > span.caption { + color: #999; + text-align: right; + white-space: nowrap; +} + +.v-debugwindow-row > span.value { + width: 100%; +} + +.v-debugwindow-selector > span.value { + width: 100%; +} + +.v-debugwindow-selector :hover { + background: rgba(255,32,32,0.5); +} + +/* LOG */ +.v-debugwindow-log { + font-family: monospace; +} + +.v-debugwindow-log .v-debugwindow-reset { + color: #fff; + background-color: #4C92ED; + padding: 4px; +} + +.v-debugwindow-log .v-debugwindow-time { + text-align: right; + color: #999; +} + +.v-debugwindow-log .v-debugwindow-message { + white-space: nowrap; + width: 100% +} + +.v-debugwindow-log .v-debugwindow-message:hover { + white-space: normal; + word-wrap: break-word; +} + +.v-debugwindow-log .v-debugwindow-message em { + background-color: #C4E6F8; +} + + +/* HIERARCHY */ +.v-debugwindow-hierarchy .v-debugwindow-info { + padding: 1em; +} + + +/* NETWORK */ +.v-debugwindow-network .v-debugwindow-row { + display: block !important; +} + +.v-debugwindow-network .v-debugwindow-row > span { + display: inline; +} diff --git a/WebContent/VAADIN/themes/base/debug/fonts/font.eot b/client/src/com/vaadin/client/debug/internal/theme/font.eot Binary files differindex c2a63b3f08..c2a63b3f08 100755..100644 --- a/WebContent/VAADIN/themes/base/debug/fonts/font.eot +++ b/client/src/com/vaadin/client/debug/internal/theme/font.eot diff --git a/WebContent/VAADIN/themes/base/debug/fonts/font.svg b/client/src/com/vaadin/client/debug/internal/theme/font.svg index 9d00e7b2fc..9d00e7b2fc 100755..100644 --- a/WebContent/VAADIN/themes/base/debug/fonts/font.svg +++ b/client/src/com/vaadin/client/debug/internal/theme/font.svg diff --git a/WebContent/VAADIN/themes/base/debug/fonts/font.ttf b/client/src/com/vaadin/client/debug/internal/theme/font.ttf Binary files differindex eee808e07e..eee808e07e 100755..100644 --- a/WebContent/VAADIN/themes/base/debug/fonts/font.ttf +++ b/client/src/com/vaadin/client/debug/internal/theme/font.ttf diff --git a/WebContent/VAADIN/themes/base/debug/fonts/font.woff b/client/src/com/vaadin/client/debug/internal/theme/font.woff Binary files differindex 2cd069ffdf..2cd069ffdf 100755..100644 --- a/WebContent/VAADIN/themes/base/debug/fonts/font.woff +++ b/client/src/com/vaadin/client/debug/internal/theme/font.woff diff --git a/client/src/com/vaadin/client/ui/VNotification.java b/client/src/com/vaadin/client/ui/VNotification.java index 93dc26f8be..af7e429340 100644 --- a/client/src/com/vaadin/client/ui/VNotification.java +++ b/client/src/com/vaadin/client/ui/VNotification.java @@ -17,14 +17,13 @@ package com.vaadin.client.ui; import java.util.ArrayList; -import java.util.Date; import java.util.EventObject; import java.util.Iterator; import com.google.gwt.aria.client.Roles; import com.google.gwt.core.client.GWT; import com.google.gwt.dom.client.Element; -import com.google.gwt.dom.client.Style.Unit; +import com.google.gwt.dom.client.NativeEvent; import com.google.gwt.event.dom.client.KeyCodes; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Event; @@ -33,6 +32,8 @@ import com.google.gwt.user.client.ui.FlowPanel; import com.google.gwt.user.client.ui.HTML; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.Widget; +import com.vaadin.client.AnimationUtil; +import com.vaadin.client.AnimationUtil.AnimationEndListener; import com.vaadin.client.ApplicationConnection; import com.vaadin.client.BrowserInfo; import com.vaadin.client.UIDL; @@ -53,6 +54,14 @@ public class VNotification extends VOverlay { public static final Position BOTTOM_LEFT = Position.BOTTOM_LEFT; public static final Position BOTTOM_RIGHT = Position.BOTTOM_RIGHT; + private static final String STYLENAME_POSITION_TOP = "v-position-top"; + private static final String STYLENAME_POSITION_RIGHT = "v-position-right"; + private static final String STYLENAME_POSITION_BOTTOM = "v-position-bottom"; + private static final String STYLENAME_POSITION_LEFT = "v-position-left"; + private static final String STYLENAME_POSITION_MIDDLE = "v-position-middle"; + private static final String STYLENAME_POSITION_CENTER = "v-position-center"; + private static final String STYLENAME_POSITION_ASSISTIVE = "v-position-assistive"; + /** * Position that is only accessible for assistive devices, invisible for * visual users. @@ -66,16 +75,11 @@ public class VNotification extends VOverlay { private static final int mouseMoveThreshold = 7; private static final int Z_INDEX_BASE = 20000; public static final String STYLE_SYSTEM = "system"; - private static final int FADE_ANIMATION_INTERVAL = 50; // == 20 fps private static final ArrayList<VNotification> notifications = new ArrayList<VNotification>(); - private int startOpacity = 90; - private int fadeMsec = 400; - private int delayMsec = 1000; - - private Timer fader; - private Timer delay; + private boolean infiniteDelay = false; + private int hideDelay = 0; private int x = -1; private int y = -1; @@ -103,13 +107,14 @@ public class VNotification extends VOverlay { @Deprecated public VNotification(int delayMsec) { this(); - this.delayMsec = delayMsec; + setDelay(delayMsec); + if (BrowserInfo.get().isTouchDevice()) { new Timer() { @Override public void run() { if (isAttached()) { - fade(); + hide(); } } }.schedule(delayMsec + TOUCH_DEVICE_IDLE_DELAY); @@ -127,24 +132,17 @@ public class VNotification extends VOverlay { @Deprecated public VNotification(int delayMsec, int fadeMsec, int startOpacity) { this(delayMsec); - this.fadeMsec = fadeMsec; - this.startOpacity = startOpacity; + AnimationUtil.setAnimationDuration(getElement(), fadeMsec + "ms"); + getElement().getStyle().setOpacity(startOpacity / 100); } - public void startDelay() { - DOM.removeEventPreview(this); - if (delayMsec > 0) { - if (delay == null) { - delay = new Timer() { - @Override - public void run() { - fade(); - } - }; - delay.schedule(delayMsec); - } - } else if (delayMsec == 0) { - fade(); + private void setDelay(int delayMsec) { + if (delayMsec < 0) { + infiniteDelay = true; + hideDelay = 0; + } else { + infiniteDelay = false; + hideDelay = delayMsec; } } @@ -237,15 +235,21 @@ public class VNotification extends VOverlay { } public void show(Position position, String style) { - setOpacity(getElement(), startOpacity); - if (style != null) { + if (temporaryStyle != null) { + removeStyleName(temporaryStyle); + removeStyleDependentName(temporaryStyle); + temporaryStyle = null; + } + if (style != null && style.length() > 0) { temporaryStyle = style; addStyleName(style); addStyleDependentName(style); } + + setPosition(position); super.show(); + updatePositionOffsets(position); notifications.add(this); - setPosition(position); positionOrSizeUpdated(); /** * Android 4 fails to render notifications correctly without a little @@ -258,149 +262,144 @@ public class VNotification extends VOverlay { @Override public void hide() { - DOM.removeEventPreview(this); - cancelDelay(); - cancelFade(); - if (temporaryStyle != null) { - removeStyleName(temporaryStyle); - removeStyleDependentName(temporaryStyle); - temporaryStyle = null; + // Run only once + if (notifications.contains(this)) { + DOM.removeEventPreview(this); + + // Still animating in, wait for it to finish before touching + // the animation delay (which would restart the animation-in + // in some browsers) + if (getStyleName().contains( + VOverlay.ADDITIONAL_CLASSNAME_ANIMATE_IN)) { + AnimationUtil.addAnimationEndListener(getElement(), + new AnimationEndListener() { + @Override + public void onAnimationEnd(NativeEvent event) { + if (AnimationUtil + .getAnimationName(event) + .contains( + VOverlay.ADDITIONAL_CLASSNAME_ANIMATE_IN)) { + VNotification.this.hide(); + } + } + }); + } else { + // Use a timer in browsers without CSS animation support + // to show the notification for the duration of the delay + if (BrowserInfo.get().isIE8() || BrowserInfo.get().isIE9()) { + new Timer() { + @Override + public void run() { + VNotification.super.hide(); + } + }.schedule(hideDelay); + } else { + if (hideDelay > 0) { + AnimationUtil.setAnimationDelay(getElement(), hideDelay + + "ms"); + } + VNotification.super.hide(); + + } + fireEvent(new HideEvent(this)); + notifications.remove(this); + } } - super.hide(); - notifications.remove(this); - fireEvent(new HideEvent(this)); } - public void fade() { - DOM.removeEventPreview(this); - cancelDelay(); - if (fader == null) { - fader = new Timer() { - private final long start = new Date().getTime(); + private void updatePositionOffsets(com.vaadin.shared.Position position) { + final Element el = getElement(); - @Override - public void run() { - /* - * To make animation smooth, don't count that event happens - * on time. Reduce opacity according to the actual time - * spent instead of fixed decrement. - */ - long now = new Date().getTime(); - long timeEplaced = now - start; - float remainingFraction = 1 - timeEplaced - / (float) fadeMsec; - int opacity = (int) (startOpacity * remainingFraction); - if (opacity <= 0) { - cancel(); - hide(); - } else { - setOpacity(getElement(), opacity); - } - } - }; - fader.scheduleRepeating(FADE_ANIMATION_INTERVAL); + // Remove all offsets (GWT PopupPanel defaults) + el.getStyle().clearTop(); + el.getStyle().clearLeft(); + + switch (position) { + case MIDDLE_LEFT: + case MIDDLE_RIGHT: + center(); + el.getStyle().clearLeft(); + break; + case TOP_CENTER: + case BOTTOM_CENTER: + center(); + el.getStyle().clearTop(); + break; + case MIDDLE_CENTER: + center(); + break; } } public void setPosition(com.vaadin.shared.Position position) { final Element el = getElement(); - el.getStyle().clearTop(); - el.getStyle().clearLeft(); - el.getStyle().clearBottom(); - el.getStyle().clearRight(); + + // Remove any previous positions + el.removeClassName(STYLENAME_POSITION_TOP); + el.removeClassName(STYLENAME_POSITION_RIGHT); + el.removeClassName(STYLENAME_POSITION_BOTTOM); + el.removeClassName(STYLENAME_POSITION_LEFT); + el.removeClassName(STYLENAME_POSITION_MIDDLE); + el.removeClassName(STYLENAME_POSITION_CENTER); + el.removeClassName(STYLENAME_POSITION_ASSISTIVE); + switch (position) { case TOP_LEFT: - el.getStyle().setTop(0, Unit.PX); - el.getStyle().setLeft(0, Unit.PX); + el.addClassName(STYLENAME_POSITION_TOP); + el.addClassName(STYLENAME_POSITION_LEFT); break; case TOP_RIGHT: - el.getStyle().setTop(0, Unit.PX); - el.getStyle().setRight(0, Unit.PX); + el.addClassName(STYLENAME_POSITION_TOP); + el.addClassName(STYLENAME_POSITION_RIGHT); break; case MIDDLE_LEFT: - center(); - el.getStyle().setLeft(0, Unit.PX); + el.addClassName(STYLENAME_POSITION_MIDDLE); + el.addClassName(STYLENAME_POSITION_LEFT); break; case MIDDLE_RIGHT: - center(); - el.getStyle().clearLeft(); - el.getStyle().setRight(0, Unit.PX); + el.addClassName(STYLENAME_POSITION_MIDDLE); + el.addClassName(STYLENAME_POSITION_RIGHT); break; case BOTTOM_RIGHT: - // Avoiding strings would be ugly since another Position is imported - // TODO this is most likely redundant - el.getStyle().setProperty("position", "absolute"); - - el.getStyle().setBottom(0, Unit.PX); - el.getStyle().setRight(0, Unit.PX); + el.addClassName(STYLENAME_POSITION_BOTTOM); + el.addClassName(STYLENAME_POSITION_RIGHT); break; case BOTTOM_LEFT: - el.getStyle().setBottom(0, Unit.PX); - el.getStyle().setLeft(0, Unit.PX); + el.addClassName(STYLENAME_POSITION_BOTTOM); + el.addClassName(STYLENAME_POSITION_LEFT); break; case TOP_CENTER: - center(); - el.getStyle().setTop(0, Unit.PX); + el.addClassName(STYLENAME_POSITION_TOP); + el.addClassName(STYLENAME_POSITION_CENTER); break; case BOTTOM_CENTER: - center(); - el.getStyle().clearTop(); - el.getStyle().setBottom(0, Unit.PX); + el.addClassName(STYLENAME_POSITION_BOTTOM); + el.addClassName(STYLENAME_POSITION_CENTER); break; case ASSISTIVE: - el.getStyle().setTop(-2000, Unit.PX); - el.getStyle().setLeft(-2000, Unit.PX); + el.addClassName(STYLENAME_POSITION_ASSISTIVE); break; - default: - case MIDDLE_CENTER: - center(); - break; - } - } - - private void cancelFade() { - if (fader != null) { - fader.cancel(); - fader = null; - } - } - - private void cancelDelay() { - if (delay != null) { - delay.cancel(); - delay = null; - } - } - - private void setOpacity(Element el, int opacity) { - el.getStyle().setOpacity(opacity / 100.0); - if (BrowserInfo.get().isIE()) { - el.getStyle().setProperty("filter", - "Alpha(opacity=" + opacity + ")"); } } @Override public void onBrowserEvent(Event event) { - DOM.removeEventPreview(this); - if (fader == null) { - fade(); - } + hide(); } @Override public boolean onEventPreview(Event event) { int type = DOM.eventGetType(event); // "modal" - if (delayMsec == -1 || temporaryStyle == STYLE_SYSTEM) { + if (infiniteDelay || temporaryStyle == STYLE_SYSTEM) { if (type == Event.ONCLICK) { if (DOM.isOrHasChild(getElement(), DOM.eventGetTarget(event))) { - fade(); + hide(); return false; } } else if (type == Event.ONKEYDOWN && event.getKeyCode() == KeyCodes.KEY_ESCAPE) { - fade(); + hide(); return false; } if (temporaryStyle == STYLE_SYSTEM) { @@ -412,25 +411,24 @@ public class VNotification extends VOverlay { // default switch (type) { case Event.ONMOUSEMOVE: - if (x < 0) { x = DOM.eventGetClientX(event); y = DOM.eventGetClientY(event); } else if (Math.abs(DOM.eventGetClientX(event) - x) > mouseMoveThreshold || Math.abs(DOM.eventGetClientY(event) - y) > mouseMoveThreshold) { - startDelay(); + hide(); } break; case Event.ONMOUSEDOWN: case Event.ONMOUSEWHEEL: case Event.ONSCROLL: - startDelay(); + hide(); break; case Event.ONKEYDOWN: if (event.getRepeat()) { return true; } - startDelay(); + hide(); break; default: break; @@ -511,17 +509,17 @@ public class VNotification extends VOverlay { public static VNotification createNotification(int delayMsec, Widget owner) { final VNotification notification = GWT.create(VNotification.class); notification.setWaiAriaRole(null); + notification.setDelay(delayMsec); - notification.delayMsec = delayMsec; if (BrowserInfo.get().isTouchDevice()) { new Timer() { @Override public void run() { if (notification.isAttached()) { - notification.fade(); + notification.hide(); } } - }.schedule(notification.delayMsec + TOUCH_DEVICE_IDLE_DELAY); + }.schedule(delayMsec + TOUCH_DEVICE_IDLE_DELAY); } notification.setOwner(owner); return notification; diff --git a/client/src/com/vaadin/client/ui/VOverlay.java b/client/src/com/vaadin/client/ui/VOverlay.java index 0e9dcbe4cb..a4f62775e1 100644 --- a/client/src/com/vaadin/client/ui/VOverlay.java +++ b/client/src/com/vaadin/client/ui/VOverlay.java @@ -16,14 +16,18 @@ package com.vaadin.client.ui; +import java.util.logging.Level; +import java.util.logging.Logger; + import com.google.gwt.animation.client.Animation; import com.google.gwt.aria.client.Roles; +import com.google.gwt.core.client.JavaScriptObject; import com.google.gwt.dom.client.Document; import com.google.gwt.dom.client.Element; import com.google.gwt.dom.client.IFrameElement; +import com.google.gwt.dom.client.NativeEvent; import com.google.gwt.dom.client.Style; import com.google.gwt.dom.client.Style.BorderStyle; -import com.google.gwt.dom.client.Style.Display; import com.google.gwt.dom.client.Style.Position; import com.google.gwt.dom.client.Style.Unit; import com.google.gwt.event.logical.shared.CloseEvent; @@ -33,16 +37,45 @@ import com.google.gwt.user.client.Window; import com.google.gwt.user.client.ui.PopupPanel; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.Widget; +import com.vaadin.client.AnimationUtil; +import com.vaadin.client.AnimationUtil.AnimationEndListener; import com.vaadin.client.ApplicationConnection; import com.vaadin.client.BrowserInfo; import com.vaadin.client.ComponentConnector; +import com.vaadin.client.ComputedStyle; import com.vaadin.client.Util; -import com.vaadin.client.VConsole; /** + * <p> * In Vaadin UI this Overlay should always be used for all elements that * temporary float over other components like context menus etc. This is to deal * stacking order correctly with VWindow objects. + * </p> + * + * <h3>Shadow</h3> + * <p> + * The separate shadow element underneath the main overlay element is <strong> + * <em>deprecated</em></strong>, and should not be used for new overlay + * components. CSS box-shadow should be used instead of a separate shadow + * element. Remember to include any vendor-prefixed versions to support all + * browsers that you need to. To cover all possible browsers that Vaadin 7 + * supports, add <code>-webkit-box-shadow</code> and the standard + * <code>box-shadow</code> properties. + * </p> + * + * <p> + * For IE8, which doesn't support CSS box-shadow, you can use the proprietary + * DropShadow filter. It doesn't provide the exact same features as box-shadow, + * but it is suitable for graceful degradation. Other options are to use a + * border or a pseudo-element underneath the overlay which mimics a shadow, or + * any combination of these. + * </p> + * + * <p> + * Read more about the DropShadow filter from <a + * href="http://msdn.microsoft.com/en-us/library/ms532985(v=vs.85).aspx" + * >Microsoft Developer Network</a> + * </p> */ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { @@ -119,7 +152,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { * Shadow element style. If an extending class wishes to use a different * style of shadow, it can use setShadowStyle(String) to give the shadow * element a new style name. + * + * @deprecated See main JavaDoc for VOverlay */ + @Deprecated public static final String CLASSNAME_SHADOW = "v-shadow"; /** @@ -128,9 +164,16 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { */ public static final String CLASSNAME_CONTAINER = "v-overlay-container"; - /* + public static final String ADDITIONAL_CLASSNAME_ANIMATE_IN = "animate-in"; + public static final String ADDITIONAL_CLASSNAME_ANIMATE_OUT = "animate-out"; + + /** * The shadow element for this overlay. + * + * @deprecated See main JavaDoc for VOverlay + * */ + @Deprecated private Element shadow; /* @@ -172,7 +215,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { * </pre> * * See default theme 'shadow.css' for implementation example. + * + * @deprecated See main JavaDoc for VOverlay */ + @Deprecated private static final String SHADOW_HTML = "<div aria-hidden=\"true\" class=\"top-left\"></div><div class=\"top\"></div><div class=\"top-right\"></div><div class=\"left\"></div><div class=\"center\"></div><div class=\"right\"></div><div class=\"bottom-left\"></div><div class=\"bottom\"></div><div class=\"bottom-right\"></div>"; /** @@ -180,6 +226,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { */ private static final int POPUP_PANEL_ANIMATION_DURATION = 200; + /** + * @deprecated See main JavaDoc for VOverlay + */ + @Deprecated private boolean sinkShadowEvents = false; public VOverlay() { @@ -197,6 +247,11 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { adjustZIndex(); } + /** + * @deprecated See main JavaDoc for VOverlay. Use the other constructors + * without the <code>showShadow</code> parameter. + */ + @Deprecated public VOverlay(boolean autoHide, boolean modal, boolean showShadow) { super(autoHide, modal); setShadowEnabled(showShadow); @@ -210,7 +265,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { * * @param enabled * true if shadow should be displayed + * + * @deprecated See main JavaDoc for VOverlay */ + @Deprecated protected void setShadowEnabled(boolean enabled) { if (enabled != isShadowEnabled()) { if (enabled) { @@ -226,6 +284,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { } } + /** + * @deprecated See main JavaDoc for VOverlay + */ + @Deprecated protected boolean isShadowEnabled() { return shadow != null; } @@ -240,6 +302,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { } } + /** + * @deprecated See main JavaDoc for VOverlay + */ + @Deprecated private void removeShadowIfPresent() { if (isShadowAttached()) { // Remove event listener from the shadow @@ -249,6 +315,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { } } + /** + * @deprecated See main JavaDoc for VOverlay + */ + @Deprecated private boolean isShadowAttached() { return isShadowEnabled() && shadow.getParentElement() != null; } @@ -362,7 +432,9 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { @Override public void show() { current = this; - super.show(); + + maybeShowWithAnimation(); + if (isAnimationEnabled()) { new ResizeAnimation().run(POPUP_PANEL_ANIMATION_DURATION); } else { @@ -371,6 +443,67 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { current = null; } + private JavaScriptObject animateInListener; + + private boolean maybeShowWithAnimation() { + boolean isAttached = isAttached() && isShowing(); + super.show(); + + // Don't animate if already visible or browser is IE8 or IE9 (no CSS + // animation support) + if (isAttached || BrowserInfo.get().isIE8() + || BrowserInfo.get().isIE9()) { + return false; + } else { + // Check if animations are used + setVisible(false); + addStyleDependentName(ADDITIONAL_CLASSNAME_ANIMATE_IN); + if (isShadowEnabled()) { + shadow.addClassName(CLASSNAME_SHADOW + "-" + + ADDITIONAL_CLASSNAME_ANIMATE_IN); + } + + ComputedStyle cs = new ComputedStyle(getElement()); + String animationName = AnimationUtil.getAnimationName(cs); + if (animationName == null) { + animationName = ""; + } + setVisible(true); + + if (animationName.contains(ADDITIONAL_CLASSNAME_ANIMATE_IN)) { + // Disable GWT PopupPanel animation if used + setAnimationEnabled(false); + animateInListener = AnimationUtil.addAnimationEndListener( + getElement(), new AnimationEndListener() { + @Override + public void onAnimationEnd(NativeEvent event) { + String animationName = AnimationUtil + .getAnimationName(event); + if (animationName + .contains(ADDITIONAL_CLASSNAME_ANIMATE_IN)) { + AnimationUtil.removeAnimationEndListener( + getElement(), animateInListener); + removeStyleDependentName(ADDITIONAL_CLASSNAME_ANIMATE_IN); + if (isShadowEnabled()) { + shadow.removeClassName(CLASSNAME_SHADOW + + "-" + + ADDITIONAL_CLASSNAME_ANIMATE_IN); + } + } + } + }); + return true; + } else { + removeStyleDependentName(ADDITIONAL_CLASSNAME_ANIMATE_IN); + if (isShadowEnabled()) { + shadow.removeClassName(CLASSNAME_SHADOW + "-" + + ADDITIONAL_CLASSNAME_ANIMATE_IN); + } + return false; + } + } + } + @Override protected void onDetach() { super.onDetach(); @@ -414,7 +547,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { * The new style name for the shadow element. Will be prefixed by * CLASSNAME_SHADOW, e.g. style=='foobar' -> actual style * name=='v-shadow-foobar'. + * + * @deprecated See main JavaDoc for VOverlay */ + @Deprecated protected void setShadowStyle(String style) { if (isShadowEnabled()) { shadow.setClassName(CLASSNAME_SHADOW + "-" + style); @@ -455,17 +591,17 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { return; } // Calculate proper z-index - String zIndex = null; + int zIndex = -1; try { // Odd behaviour with Windows Hosted Mode forces us to use // this redundant try/catch block (See dev.vaadin.com #2011) - zIndex = DOM.getStyleAttribute(getElement(), "zIndex"); + zIndex = Integer.parseInt(getElement().getStyle().getZIndex()); } catch (Exception ignore) { // Ignored, will cause no harm - zIndex = "1000"; + zIndex = 1000; } - if (zIndex == null) { - zIndex = "" + Z_INDEX; + if (zIndex == -1) { + zIndex = Z_INDEX; } // Calculate position and size if (BrowserInfo.get().isIE()) { @@ -502,7 +638,11 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { } } - private void updateShadowPosition(final double progress, String zIndex, + /** + * @deprecated See main JavaDoc for VOverlay + */ + @Deprecated + private void updateShadowPosition(final double progress, int zIndex, PositionAndSize positionAndSize) { // Opera needs some shaking to get parts of the shadow showing // properly (ticket #2704) @@ -514,12 +654,8 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { } updatePositionAndSize(shadow, positionAndSize); - shadow.getStyle().setProperty("zIndex", zIndex); - if (progress < 0.9) { - shadow.getStyle().setDisplay(Display.NONE); - } else { - shadow.getStyle().clearDisplay(); - } + shadow.getStyle().setZIndex(zIndex); + shadow.getStyle().setProperty("display", progress < 0.9 ? "none" : ""); // Opera fix, part 2 (ticket #2704) if (BrowserInfo.get().isOpera()) { @@ -582,6 +718,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { sinkShadowEvents(); } + /** + * @deprecated See main JavaDoc for VOverlay + */ + @Deprecated private void sinkShadowEvents() { if (isSinkShadowEvents() && isShadowAttached()) { // Sink the same events as the actual overlay has sunk @@ -591,6 +731,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { } } + /** + * @deprecated See main JavaDoc for VOverlay + */ + @Deprecated private void unsinkShadowEvents() { if (isShadowAttached()) { DOM.setEventListener(shadow, null); @@ -607,7 +751,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { * overlay * * @param sinkShadowEvents + * + * @deprecated See main JavaDoc for VOverlay */ + @Deprecated protected void setSinkShadowEvents(boolean sinkShadowEvents) { this.sinkShadowEvents = sinkShadowEvents; if (sinkShadowEvents) { @@ -617,6 +764,10 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { } } + /** + * @deprecated See main JavaDoc for VOverlay + */ + @Deprecated protected boolean isSinkShadowEvents() { return sinkShadowEvents; } @@ -675,7 +826,9 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { if (ac == null) { // could not figure out which one we belong to, styling will // probably fail - VConsole.error("Could not determine ApplicationConnection for Overlay. Overlay will be attached directly to the root panel"); + Logger.getLogger(getClass().getSimpleName()) + .log(Level.WARNING, + "Could not determine ApplicationConnection for Overlay. Overlay will be attached directly to the root panel"); return RootPanel.get().getElement(); } else { return getOverlayContainer(ac); @@ -790,4 +943,94 @@ public class VOverlay extends PopupPanel implements CloseHandler<PopupPanel> { return $wnd.innerHeight !== undefined ? $wnd.innerHeight :-1; }-*/; -} + /* + * (non-Javadoc) + * + * @see com.google.gwt.user.client.ui.PopupPanel#hide() + */ + @Override + public void hide() { + hide(false); + } + + /* + * (non-Javadoc) + * + * @see com.google.gwt.user.client.ui.PopupPanel#hide(boolean) + */ + @Override + public void hide(final boolean autoClosed) { + if (BrowserInfo.get().isIE8() || BrowserInfo.get().isIE9()) { + super.hide(autoClosed); + } else { + if (getStyleName().contains(ADDITIONAL_CLASSNAME_ANIMATE_IN)) { + AnimationUtil.addAnimationEndListener(getElement(), + new AnimationEndListener() { + @Override + public void onAnimationEnd(NativeEvent event) { + if (AnimationUtil + .getAnimationName(event) + .contains( + ADDITIONAL_CLASSNAME_ANIMATE_IN)) { + VOverlay.this.hide(autoClosed); + } + } + }); + } else { + // Check if animations are used + addStyleDependentName(ADDITIONAL_CLASSNAME_ANIMATE_OUT); + if (isShadowEnabled()) { + shadow.addClassName(CLASSNAME_SHADOW + "-" + + ADDITIONAL_CLASSNAME_ANIMATE_OUT); + } + ComputedStyle cs = new ComputedStyle(getElement()); + String animationName = AnimationUtil.getAnimationName(cs); + if (animationName == null) { + animationName = ""; + } + + if (animationName.contains(ADDITIONAL_CLASSNAME_ANIMATE_OUT)) { + // Disable GWT PopupPanel closing animation if used + setAnimationEnabled(false); + + AnimationUtil.addAnimationEndListener(getElement(), + new AnimationEndListener() { + @Override + public void onAnimationEnd(NativeEvent event) { + String animationName = AnimationUtil + .getAnimationName(event); + if (animationName + .contains(ADDITIONAL_CLASSNAME_ANIMATE_OUT)) { + AnimationUtil + .removeAllAnimationEndListeners(getElement()); + // Remove both animation styles just in + // case + removeStyleDependentName(ADDITIONAL_CLASSNAME_ANIMATE_IN); + removeStyleDependentName(ADDITIONAL_CLASSNAME_ANIMATE_OUT); + if (isShadowEnabled()) { + shadow.removeClassName(CLASSNAME_SHADOW + + "-" + + ADDITIONAL_CLASSNAME_ANIMATE_IN); + shadow.removeClassName(CLASSNAME_SHADOW + + "-" + + ADDITIONAL_CLASSNAME_ANIMATE_OUT); + } + VOverlay.super.hide(autoClosed); + } + } + }); + // No event previews should happen after the animation has + // started + VOverlay.this.setPreviewingAllNativeEvents(false); + } else { + removeStyleDependentName(ADDITIONAL_CLASSNAME_ANIMATE_OUT); + if (isShadowEnabled()) { + shadow.removeClassName(CLASSNAME_SHADOW + "-" + + ADDITIONAL_CLASSNAME_ANIMATE_OUT); + } + super.hide(autoClosed); + } + } + } + } +}
\ No newline at end of file diff --git a/client/src/com/vaadin/client/ui/VPopupView.java b/client/src/com/vaadin/client/ui/VPopupView.java index adf070f453..931945e546 100644 --- a/client/src/com/vaadin/client/ui/VPopupView.java +++ b/client/src/com/vaadin/client/ui/VPopupView.java @@ -91,6 +91,9 @@ public class VPopupView extends HTML implements Iterable<Widget> { addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { + preparePopup(popup); + showPopup(popup); + center(); fireEvent(new VisibilityChangeEvent(true)); } }); @@ -111,7 +114,8 @@ public class VPopupView extends HTML implements Iterable<Widget> { /** For internal use only. May be removed or replaced in the future. */ public void preparePopup(final CustomPopup popup) { - popup.setVisible(false); + popup.setVisible(true); + popup.setWidget(loading); popup.show(); } @@ -128,8 +132,6 @@ public class VPopupView extends HTML implements Iterable<Widget> { */ public void showPopup(final CustomPopup popup) { popup.setPopupPosition(0, 0); - - popup.setVisible(true); } /** For internal use only. May be removed or replaced in the future. */ @@ -270,9 +272,7 @@ public class VPopupView extends HTML implements Iterable<Widget> { public void hide(boolean autoClosed) { VConsole.log("Hiding popupview"); syncChildren(); - if (popupComponentWidget != null && popupComponentWidget != loading) { - remove(popupComponentWidget); - } + clearPopupComponentConnector(); hasHadMouseOver = false; shortcutActionHandler = null; super.hide(autoClosed); @@ -333,15 +333,18 @@ public class VPopupView extends HTML implements Iterable<Widget> { } } - @Override - public boolean remove(Widget w) { + private void clearPopupComponentConnector() { if (popupComponentConnector != null) { popupComponentConnector.removeStateChangeHandler(this); } popupComponentConnector = null; popupComponentWidget = null; captionWrapper = null; + } + @Override + public boolean remove(Widget w) { + clearPopupComponentConnector(); return super.remove(w); } diff --git a/client/src/com/vaadin/client/ui/VWindow.java b/client/src/com/vaadin/client/ui/VWindow.java index 9b1f7a6f3c..7c1a21f654 100644 --- a/client/src/com/vaadin/client/ui/VWindow.java +++ b/client/src/com/vaadin/client/ui/VWindow.java @@ -303,7 +303,10 @@ public class VWindow extends VWindowOverlay implements } private static VWindow getTopmostWindow() { - return windowOrder.get(windowOrder.size() - 1); + if (windowOrder.size() > 0) { + return windowOrder.get(windowOrder.size() - 1); + } + return null; } /** For internal use only. May be removed or replaced in the future. */ @@ -1030,6 +1033,7 @@ public class VWindow extends VWindowOverlay implements } private void onCloseClick() { + // Send the close event to the server client.updateVariable(id, "close", true, true); } @@ -1263,7 +1267,7 @@ public class VWindow extends VWindowOverlay implements // are not cancelled here and target this window to be consume():d // meaning the event won't be sent to the rest of the preview handlers. - if (getTopmostWindow().vaadinModality) { + if (getTopmostWindow() != null && getTopmostWindow().vaadinModality) { // Topmost window is modal. Cancel the event if it targets something // outside that window (except debug console...) if (DOM.getCaptureElement() != null) { diff --git a/client/src/com/vaadin/client/ui/popupview/PopupViewConnector.java b/client/src/com/vaadin/client/ui/popupview/PopupViewConnector.java index bde5f6a051..6afceb75de 100644 --- a/client/src/com/vaadin/client/ui/popupview/PopupViewConnector.java +++ b/client/src/com/vaadin/client/ui/popupview/PopupViewConnector.java @@ -26,6 +26,7 @@ import com.vaadin.client.VCaptionWrapper; import com.vaadin.client.communication.StateChangeEvent; import com.vaadin.client.ui.AbstractHasComponentsConnector; import com.vaadin.client.ui.PostLayoutListener; +import com.vaadin.client.ui.VOverlay; import com.vaadin.client.ui.VPopupView; import com.vaadin.shared.ui.ComponentStateUtil; import com.vaadin.shared.ui.Connect; @@ -100,27 +101,37 @@ public class PopupViewConnector extends AbstractHasComponentsConnector if (!getChildComponents().isEmpty()) { getWidget().preparePopup(getWidget().popup); getWidget().popup.setPopupConnector(getChildComponents().get(0)); - if (ComponentStateUtil.hasStyles(getState())) { - final StringBuffer styleBuf = new StringBuffer(); - final String primaryName = getWidget().popup - .getStylePrimaryName(); + + final StringBuffer styleBuf = new StringBuffer(); + final String primaryName = getWidget().popup.getStylePrimaryName(); + styleBuf.append(primaryName); + + // Add "animate-in" class back if already present + boolean isAnimatingIn = getWidget().popup.getStyleName().contains( + VOverlay.ADDITIONAL_CLASSNAME_ANIMATE_IN); + + if (isAnimatingIn) { + styleBuf.append(" "); styleBuf.append(primaryName); + styleBuf.append("-"); + styleBuf.append(VOverlay.ADDITIONAL_CLASSNAME_ANIMATE_IN); + } + + if (ComponentStateUtil.hasStyles(getState())) { for (String style : getState().styles) { styleBuf.append(" "); styleBuf.append(primaryName); styleBuf.append("-"); styleBuf.append(style); } - getWidget().popup.setStyleName(styleBuf.toString()); - } else { - getWidget().popup.setStyleName(getWidget().popup - .getStylePrimaryName()); } + + getWidget().popup.setStyleName(styleBuf.toString()); getWidget().showPopup(getWidget().popup); centerAfterLayout = true; - // The popup shouldn't be visible, try to hide it. } else { + // The popup shouldn't be visible, try to hide it. getWidget().popup.hide(); } } diff --git a/client/src/com/vaadin/client/ui/window/WindowConnector.java b/client/src/com/vaadin/client/ui/window/WindowConnector.java index 5c8f5e2d2d..2a2f031144 100644 --- a/client/src/com/vaadin/client/ui/window/WindowConnector.java +++ b/client/src/com/vaadin/client/ui/window/WindowConnector.java @@ -19,6 +19,7 @@ import java.util.logging.Logger; import com.google.gwt.dom.client.Element; import com.google.gwt.dom.client.NativeEvent; +import com.google.gwt.dom.client.Node; import com.google.gwt.dom.client.Style; import com.google.gwt.dom.client.Style.Position; import com.google.gwt.dom.client.Style.Unit; @@ -58,6 +59,8 @@ public class WindowConnector extends AbstractSingleComponentContainerConnector SimpleManagedLayout, PostLayoutListener, MayScrollChildren, WindowMoveHandler { + private Node windowClone; + private ClickEventHandler clickEventHandler = new ClickEventHandler(this) { @Override protected void fireClick(NativeEvent event, @@ -192,6 +195,17 @@ public class WindowConnector extends AbstractSingleComponentContainerConnector public void onConnectorHierarchyChange(ConnectorHierarchyChangeEvent event) { // We always have 1 child, unless the child is hidden getWidget().contentPanel.setWidget(getContentWidget()); + + if (getParent() == null && windowClone != null) { + // If the window is removed from the UI, add the copy of the + // contents to the window (in case of an 'out-animation') + getWidget().getElement().removeAllChildren(); + getWidget().getElement().appendChild(windowClone); + + // Clean reference + windowClone = null; + } + } @Override @@ -268,6 +282,16 @@ public class WindowConnector extends AbstractSingleComponentContainerConnector window.center(); } window.positionOrSizeUpdated(); + + if (getParent() != null) { + // Take a copy of the contents, since the server will detach all + // children of this window when it's closed, and the window will be + // emptied during the following hierarchy update (we need to keep + // the contents visible for the duration of a possible + // 'out-animation') + windowClone = getWidget().getElement().getFirstChild() + .cloneNode(true); + } } @Override diff --git a/server/src/com/vaadin/ui/themes/ValoTheme.java b/server/src/com/vaadin/ui/themes/ValoTheme.java new file mode 100644 index 0000000000..51e2e283f2 --- /dev/null +++ b/server/src/com/vaadin/ui/themes/ValoTheme.java @@ -0,0 +1,809 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.ui.themes; + +import com.vaadin.ui.Notification.Type; +import com.vaadin.ui.Table.ColumnHeaderMode; + +/** + * <p> + * Additional style names which can be used with the Valo theme. + * </p> + * + * <p> + * These styles are only available if the Valo theme (or any of it's variants) + * is built with the <code>$valo-include-common-stylenames</code> Sass variable + * set to <code>true</code>. + * </p> + * + * <p> + * Most of these additional style names can be included individually into your + * custom theme using the component specific Sass mixins, in which case you can + * also define the style names yourself. See the Valo theme Sass API + * documentation for additional information. + * </p> + * + * TODO link to Sass API documentation + * + * @since 7.3.0 + * @author Vaadin Ltd + */ +public class ValoTheme { + + public static final String THEME_NAME = "valo"; + + /*************************************************************************** + * + * Notification styles + * + **************************************************************************/ + + /** + * Styles the notification to look like {@link Type#TRAY_NOTIFICATION}, + * without setting the position and delay. Can be combined with any other + * Notification style. + */ + public static final String NOTIFICATION_TRAY = "tray"; + + /** + * Styles the notification to look like {@link Type#WARNING_MESSAGE}, + * without setting the position and delay. Can be combined with any other + * Notification style. + */ + public static final String NOTIFICATION_WARNING = "warning"; + + /** + * Styles the notification to look like {@link Type#ERROR_MESSAGE}, without + * setting the position and delay. Can be combined with any other + * Notification style. + */ + public static final String NOTIFICATION_ERROR = "error"; + + /** + * Styles the notification to look like a system notification. Can be + * combined with any other Notification style. + */ + public static final String NOTIFICATION_SYSTEM = "system"; + + /** + * Styles the notification to span the entire width of the viewport. Can be + * combined with any other Notification style. + */ + public static final String NOTIFICATION_BAR = "bar"; + + /** + * Smaller padding and font size for the notification. Can be combined with + * any other Notification style. + */ + public static final String NOTIFICATION_SMALL = "small"; + + /** + * Adds a close button to the notification to imply that the user must click + * on the notification to dismiss it. Use in combination with an infinite + * delay (<code>-1</code>). Can be combined with any other Notification + * style. + */ + public static final String NOTIFICATION_CLOSABLE = "closable"; + + /** + * Success notification style. Adds a border around the notification and an + * icon next to the title. Can be combined with any other Label style. + */ + public static final String NOTIFICATION_SUCCESS = "success"; + + /** + * Failure notification style. Adds a border around the notification and an + * icon next to the title. Can be combined with any other Label style. + */ + public static final String NOTIFICATION_FAILURE = "failure"; + + /*************************************************************************** + * + * Label styles + * + **************************************************************************/ + + /** + * Header style for main application headings. Can be combined with any + * other Label style. + */ + public static final String LABEL_H1 = "h1"; + + /** + * Header style for different sections in the application. Can be combined + * with any other Label style. + */ + public static final String LABEL_H2 = "h2"; + + /** + * Header style for different sub-sections in the application. Can be + * combined with any other Label style. + */ + public static final String LABEL_H3 = "h3"; + + /** + * Header style for different sub-sections in the application. Can be + * combined with any other Label style. + */ + public static final String LABEL_H4 = "h4"; + + /** + * A utility style that can be combined with the {@link #LABEL_H1}, + * {@link #LABEL_H2}, {@link #LABEL_H3} and {@link #LABEL_H4} styles to + * remove the default margins from the header. + */ + public static final String LABEL_NO_MARGIN = "no-margin"; + + /** + * Small font size. Suitable for additional/supplementary UI text. Can be + * combined with any other Label style. + */ + public static final String LABEL_SMALL = "small"; + + /** + * Large font size. Suitable for important/prominent UI text. Can be + * combined with any other Label style. + */ + public static final String LABEL_LARGE = "large"; + + /** + * Lighter font weight. Suitable for additional/supplementary UI text. Can + * be combined with any other Label style. + */ + public static final String LABEL_LIGHT = "light"; + + /** + * Bolder font weight. Suitable for important/prominent UI text. Can be + * combined with any other Label style. + */ + public static final String LABEL_BOLD = "bold"; + + /** + * Success badge style. Adds a border around the label and an icon next to + * the text. Suitable for UI notifications that need to in the direct + * context of some component. Can be combined with any other Label style. + */ + public static final String LABEL_SUCCESS = "success"; + + /** + * Failure badge style. Adds a border around the label and an icon next to + * the text. Suitable for UI notifications that need to in the direct + * context of some component. Can be combined with any other Label style. + */ + public static final String LABEL_FAILURE = "failure"; + + /*************************************************************************** + * + * Button styles + * + **************************************************************************/ + + /** + * Primary action button (e.g. the button that should get activated when the + * user presses the <code>enter</code> key in a form). Use sparingly, only + * one default button per view should be visible. Can be combined with any + * other Button style. + */ + public static final String BUTTON_PRIMARY = "primary"; + + /** + * A prominent button that can be used instead of the + * {@link #BUTTON_PRIMARY} for primary actions when the action is considered + * <b>safe</b> for the user (i.e. does not cause any data loss or any other + * irreversible action). Can be combined with any other Button style. + */ + public static final String BUTTON_FRIENDLY = "friendly"; + + /** + * A prominent button that can be used when the action is considered + * <b>unsafe</b> for the user (i.e. it causes data loss or some other + * irreversible action). Can be combined with any other Button style. + */ + public static final String BUTTON_DANGER = "danger"; + + /** + * Borderless button. Can be combined with any other Button style. + */ + public static final String BUTTON_BORDERLESS = "borderless"; + + /** + * Borderless button with a colored caption text. Can be combined with any + * other Button style. + */ + public static final String BUTTON_BORDERLESS_COLORED = "borderless-colored"; + + /** + * "Quiet" button, which looks like {@link #BUTTON_BORDERLESS} until you + * hover over it with the mouse. Can be combined with any other Button + * style. + */ + public static final String BUTTON_QUIET = "quiet"; + + /** + * Makes the button look like the Link component. Can be combined with any + * other Button style. + */ + public static final String BUTTON_LINK = "link"; + + /** + * Small size button. Can be combined with any other Button style. + */ + public static final String BUTTON_SMALL = "small"; + + /** + * Large size button. Can be combined with any other Button style. + */ + public static final String BUTTON_LARGE = "large"; + + /** + * Align the icon to the right side of the button caption. Can be combined + * with any other Button style. + */ + public static final String BUTTON_ICON_ALIGN_RIGHT = "icon-align-right"; + + /** + * Stack the icon on top of the button caption. Can be combined with any + * other Button style. + */ + public static final String BUTTON_ICON_ALIGN_TOP = "icon-align-top"; + + /** + * Only show the icon in the button, and size the button to a square shape. + */ + public static final String BUTTON_ICON_ONLY = "icon-only"; + + /*************************************************************************** + * + * Link styles + * + **************************************************************************/ + + /** + * Small size link. + */ + public static final String LINK_SMALL = "small"; + + /** + * Large size link. + */ + public static final String LINK_LARGE = "large"; + + /*************************************************************************** + * + * TextField styles + * + **************************************************************************/ + + /** + * Small size text field. Can be combined with any other TextField style. + */ + public static final String TEXTFIELD_SMALL = "small"; + + /** + * Large size text field. Can be combined with any other TextField style. + */ + public static final String TEXTFIELD_LARGE = "large"; + + /** + * Removes the border and background from the text field. Can be combined + * with any other TextField style. + */ + public static final String TEXTFIELD_BORDERLESS = "borderless"; + + /** + * Align the text inside the field to the right. Can be combined with any + * other TextField style. + */ + public static final String TEXTFIELD_ALIGN_RIGHT = "align-right"; + + /** + * Align the text inside the field to center. Can be combined with any other + * TextField style. + */ + public static final String TEXTFIELD_ALIGN_CENTER = "align-center"; + + /** + * Move the default caption icon inside the text field. Can be combined with + * any other TextField style. + */ + public static final String TEXTFIELD_INLINE_ICON = "inline-icon"; + + /*************************************************************************** + * + * TextArea styles + * + **************************************************************************/ + + /** + * Small size text area. Can be combined with any other TextArea style. + */ + public static final String TEXTAREA_SMALL = "small"; + + /** + * Large size text area. Can be combined with any other TextArea style. + */ + public static final String TEXTAREA_LARGE = "large"; + + /** + * Removes the border and background from the text area. Can be combined + * with any other TextArea style. + */ + public static final String TEXTAREA_BORDERLESS = "borderless"; + + /** + * Align the text inside the area to the right. Can be combined with any + * other TextArea style. + */ + public static final String TEXTAREA_ALIGN_RIGHT = "align-right"; + + /** + * Align the text inside the area to center. Can be combined with any other + * TextArea style. + */ + public static final String TEXTAREA_ALIGN_CENTER = "align-center"; + + /*************************************************************************** + * + * DateField styles + * + **************************************************************************/ + + /** + * Small size date field. Can be combined with any other DateField style. + */ + public static final String DATEFIELD_SMALL = "small"; + + /** + * Large size date field. Can be combined with any other DateField style. + */ + public static final String DATEFIELD_LARGE = "large"; + + /** + * Removes the border and background from the date field. Can be combined + * with any other DateField style. + */ + public static final String DATEFIELD_BORDERLESS = "borderless"; + + /** + * Align the text inside the field to the right. Can be combined with any + * other DateField style. + */ + public static final String DATEFIELD_ALIGN_RIGHT = "align-right"; + + /** + * Align the text inside the field to center. Can be combined with any other + * DateField style. + */ + public static final String DATEFIELD_ALIGN_CENTER = "align-center"; + + /*************************************************************************** + * + * ComboBox styles + * + **************************************************************************/ + + /** + * Small size combo box. Can be combined with any other ComboBox style. + */ + public static final String COMBOBOX_SMALL = "small"; + + /** + * Large size combo box. Can be combined with any other ComboBox style. + */ + public static final String COMBOBOX_LARGE = "large"; + + /** + * Removes the border and background from the combo box. Can be combined + * with any other ComboBox style. + */ + public static final String COMBOBOX_BORDERLESS = "borderless"; + + /** + * Align the text inside the combo box to the right. Can be combined with + * any other TextField style. + */ + public static final String COMBOBOX_ALIGN_RIGHT = "align-right"; + + /** + * Align the text inside the combo box to center. Can be combined with any + * other TextField style. + */ + public static final String COMBOBOX_ALIGN_CENTER = "align-center"; + + /*************************************************************************** + * + * CheckBox styles + * + **************************************************************************/ + + /** + * Small size check box. Can be combined with any other CheckBox style. + */ + public static final String CHECKBOX_SMALL = "small"; + + /** + * Large size check box. Can be combined with any other CheckBox style. + */ + public static final String CHECKBOX_LARGE = "large"; + + /*************************************************************************** + * + * OptionGroup styles + * + **************************************************************************/ + + /** + * Small size option group. Can be combined with any other OptionGroup + * style. + */ + public static final String OPTIONGROUP_SMALL = "small"; + + /** + * Large size option group. Can be combined with any other OptionGroup + * style. + */ + public static final String OPTIONGROUP_LARGE = "large"; + + /*************************************************************************** + * + * Slider styles + * + **************************************************************************/ + + /** + * Hide the indicator bar from the slider. Can be combined with any other + * Slider style. + */ + public static final String SLIDER_NO_INDICATOR = "no-indicator"; + + /*************************************************************************** + * + * ProgressBar styles + * + **************************************************************************/ + + /** + * Make the progress bar indicator appear as a dot which progresses over the + * progress bar track (instead of a growing bar). + */ + public static final String PROBRESSBAR_POINT = "point"; + + /*************************************************************************** + * + * MenuBar styles + * + **************************************************************************/ + + /** + * Small size menu bar. Can be combined with any other MenuBar style. + */ + public static final String MENUBAR_SMALL = "small"; + + /** + * Borderless menu bar. Can be combined with any other MenuBar style. + */ + public static final String MENUBAR_BORDERLESS = "borderless"; + + /*************************************************************************** + * + * Table and TreeTable styles + * + **************************************************************************/ + + /** + * Remove the alternating row colors. Can be combined with any other + * Table/TreeTable style. + */ + public static final String TABLE_NO_STRIPES = "no-stripes"; + + /** + * See {@link #TABLE_NO_STRIPES} + */ + public static final String TREETABLE_NO_STRIPES = TABLE_NO_STRIPES; + + /** + * Remove the vertical divider lines between the table columns. Can be + * combined with any other Table/TreeTable style. + */ + public static final String TABLE_NO_VERTICAL_LINES = "no-vertical-lines"; + + /** + * See {@link #TABLE_NO_VERTICAL_LINES} + */ + public static final String TREETABLE_NO_VERTICAL_LINES = TABLE_NO_VERTICAL_LINES; + + /** + * Remove the horizontal divider lines between the table rows. Can be + * combined with any other Table/TreeTable style. + */ + public static final String TABLE_NO_HORIZONTAL_LINES = "no-horizontal-lines"; + + /** + * See {@link #TABLE_NO_HORIZONTAL_LINES} + */ + public static final String TREETABLE_NO_HORIZONTAL_LINES = TABLE_NO_HORIZONTAL_LINES; + + /** + * Hide the table column headers (effectively the same as + * {@link ColumnHeaderMode#HIDDEN}). Can be combined with any other + * Table/TreeTable style. + */ + public static final String TABLE_NO_HEADER = "no-header"; + + /** + * See {@link #TABLE_NO_HEADER} + */ + public static final String TREETABLE_NO_HEADER = TABLE_NO_HEADER; + + /** + * Remove the outer border of the table. Can be combined with any other + * Table/TreeTable style. + */ + public static final String TABLE_BORDERLESS = "borderless"; + + /** + * See {@link #TABLE_BORDERLESS} + */ + public static final String TREETABLE_BORDERLESS = TABLE_BORDERLESS; + + /** + * Reduce the white space inside the table cells. Can be combined with any + * other Table/TreeTable style. + */ + public static final String TABLE_COMPACT = "compact"; + + /** + * See {@link #TABLE_COMPACT} + */ + public static final String TREETABLE_COMPACT = TABLE_COMPACT; + + /** + * Small font size and reduced the white space inside the table cells. Can + * be combined with any other Table/TreeTable style. + */ + public static final String TABLE_SMALL = "small"; + + /** + * See {@link #TABLE_SMALL} + */ + public static final String TREETABLE_SMALL = TABLE_SMALL; + + /*************************************************************************** + * + * DragAndDropWrapper styles + * + **************************************************************************/ + + /** + * Hide the "box drag hints" (i.e. the style which gets applied when the + * drag is in the middle/center area of the drag target). + */ + public static final String DRAG_AND_DROP_WRAPPER_NO_BOX_DRAG_HINTS = "no-box-drag-hints"; + + /** + * Hide the "vertical drag hints" (i.e. the style which gets applied when + * the drag is in the top/bottom part of the drag target). + */ + public static final String DRAG_AND_DROP_WRAPPER_NO_VERTICAL_DRAG_HINTS = "no-vertical-drag-hints"; + + /** + * Hide the "horizontal drag hints" (i.e. the style which gets applied when + * the drag is in the left/right part of the drag target). + */ + public static final String DRAG_AND_DROP_WRAPPER_NO_HORIZONTAL_DRAG_HINTS = "no-horizontal-drag-hints"; + + /*************************************************************************** + * + * Panel styles + * + **************************************************************************/ + + /** + * Remove borders and the background color of the panel. Can be combined + * with any other Panel style. + */ + public static final String PANEL_BORDERLESS = "borderless"; + + /** + * Show a divider between the panel caption and content when the content + * area is scrolled. Suitable with the {@link #PANEL_BORDERLESS} style. Can + * be combined with any other Panel style. + */ + public static final String PANEL_SCROLL_INDICATOR = "scroll-indicator"; + + /** + * Inset panel style. Can be combined with any other Panel style. + */ + public static final String PANEL_WELL = "well"; + + /*************************************************************************** + * + * SplitPanel styles + * + **************************************************************************/ + + /** + * Make the split handle wider. + */ + public static final String SPLITPANEL_LARGE = "large"; + + /*************************************************************************** + * + * TabSheet styles + * + **************************************************************************/ + + /** + * Adds a border around the whole component as well as around individual + * tabs in the tab bar. Can be combined with any other TabSheet style. + */ + public static final String TABSHEET_FRAMED = "framed"; + + /** + * Center the tabs inside the tab bar. Works best if all the tabs fit + * completely in the tab bar (i.e. no tab bar scrolling). Can be combined + * with any other TabSheet style. + */ + public static final String TABSHEET_CENTERED_TABS = "centered-tabs"; + + /** + * Give equal amount of space to all tabs in the tab bar (.i.e expand ratio + * == 1 for all tabs). The tab captions will be truncated if they do not fit + * in to the tab. Tab scrolling will be disabled when this style is applied + * (all tabs will be visible at the same time). Can be combined with any + * other TabSheet style. + */ + public static final String TABSHEET_EQUAL_WIDTH_TABS = "equal-width-tabs"; + + /** + * Add a small amount of padding around the tabs in the tab bar, so that + * they don't touch the outer edges of the component. Can be combined with + * any other TabSheet style. + */ + public static final String TABSHEET_PADDED_TABBAR = "padded-tabbar"; + + /** + * Reduce the whitespace around the tabs in the tab bar. Can be combined + * with any other TabSheet style. + */ + public static final String TABSHEET_COMPACT_TABBAR = "compact-tabbar"; + + /** + * Display tab icons on top of the tab captions (by default the icons are + * place on the left side of the caption). Can be combined with any other + * TabSheet style. + */ + public static final String TABSHEET_ICONS_ON_TOP = "icons-on-top"; + + /** + * Only the selected tab has the close button visible. Does not prevent + * closing the tab programmatically, it only hides the button from the end + * user. Can be combined with any other TabSheet style. + */ + public static final String TABSHEET_ONLY_SELECTED_TAB_IS_CLOSABLE = "only-selected-closable"; + + /*************************************************************************** + * + * Accordion styles + * + **************************************************************************/ + + /** + * Remove the outer border from the accordion. Can be combined with any + * other Accordion style. + */ + public static final String ACCORDION_BORDERLESS = "borderless"; + + /*************************************************************************** + * + * Window and related styles + * + **************************************************************************/ + + /** + * Add this style to any layout component (e.g. CssLayout, VerticalLayout or + * HorizontalLayout) and place it inside the root layout of the window to + * create a toolbar area for the window. You can then place any other + * components inside the toolbar layout, e.g. a MenuBar. + */ + public static final String WINDOW_TOP_TOOLBAR = "v-window-top-toolbar"; + + /** + * Add this style to any layout component (e.g. CssLayout, VerticalLayout or + * HorizontalLayout) and place it inside the root layout of the window to + * create a toolbar area for the window. You can then place any other + * components inside the toolbar layout, e.g. a MenuBar. + */ + public static final String WINDOW_BOTTOM_TOOLBAR = "v-window-bottom-toolbar"; + + /*************************************************************************** + * + * FormLayout styles + * + **************************************************************************/ + + /** + * Removes the borders and background from any direct child field components + * (TextField, TextArea, DateField, ComboBox) in the layout. Reduces the + * spacing between the form rows adds separator lines between them. + */ + public static final String FORMLAYOUT_LIGHT = "light"; + + /*************************************************************************** + * + * Layout styles + * + **************************************************************************/ + + /** + * Make a layout look like the Panel component (resembles visually a card). + * Add an additional <code>v-panel-caption</code> style name to any layout + * inside the card layout to make it look like a Panel's caption. + */ + public static final String LAYOUT_CARD = "card"; + + /** + * Make a layout look like the {@link #PANEL_WELL} style. Add an additional + * <code>v-panel-caption</code> style name to any layout inside the card + * layout to make it look like a Panel's caption. + */ + public static final String LAYOUT_WELL = "well"; + + /*************************************************************************** + * + * Valo menu styles + * + **************************************************************************/ + + /** + * Set the primary style name of a CssLayout to this, and add any number of + * layouts with the {@link #MENU_PART} style inside it. + */ + public static final String MENU_ROOT = "valo-menu"; + + /** + * Add this style name to any layout and place it inside a layout with the + * {@link #MENU_ROOT} style to build a menu component. Use the additional + * MENU styles for individual components inside the layout. + */ + public static final String MENU_PART = "valo-menu-part"; + + /** + * TODO + */ + public static final String MENU_TITLE = "valo-menu-title"; + + /** + * TODO + */ + public static final String MENU_SUBTITLE = "valo-menu-subtitle"; + + /** + * TODO + */ + public static final String MENU_ITEM = "valo-menu-title"; + + /** + * TODO + */ + public static final String MENU_BADGE = "valo-menu-badge"; + + /** + * TODO + */ + public static final String MENU_LOGO = "valo-menu-logo"; + +} diff --git a/themes/build.xml b/themes/build.xml index efbaaaa18f..0135f55071 100644 --- a/themes/build.xml +++ b/themes/build.xml @@ -40,6 +40,9 @@ <antcall target="compile-theme"> <param name="theme" value="liferay" /> </antcall> + <antcall target="compile-theme"> + <param name="theme" value="valo" /> + </antcall> </target> <target name="jar" depends="compile-themes"> diff --git a/uitest/src/com/vaadin/tests/themes/valo/Accordions.java b/uitest/src/com/vaadin/tests/themes/valo/Accordions.java new file mode 100644 index 0000000000..b401451271 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/Accordions.java @@ -0,0 +1,86 @@ +/* + * Copyright 2000-2013 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.ui.Accordion; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.VerticalLayout; + +public class Accordions extends VerticalLayout implements View { + public Accordions() { + setMargin(true); + + Label h1 = new Label("Accordions"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout row = new HorizontalLayout(); + row.setSpacing(true); + row.setWidth("100%"); + addComponent(row); + + row.addComponent(getAccordion("Normal")); + + Accordion ac = getAccordion("Borderless"); + ac.addStyleName("borderless"); + row.addComponent(ac); + + } + + Accordion getAccordion(String caption) { + Accordion ac = new Accordion(); + ac.setCaption(caption); + ac.addTab(new VerticalLayout() { + { + setMargin(true); + addComponent(new Label( + "Fabio vel iudice vincam, sunt in culpa qui officia. Ut enim ad minim veniam, quis nostrud exercitation.")); + } + }, "First Caption", TestIcon.get()); + ac.addTab(new VerticalLayout() { + { + setMargin(true); + addComponent(new Label( + "Gallia est omnis divisa in partes tres, quarum.")); + } + }, "Second Caption", TestIcon.get()); + ac.addTab(new VerticalLayout() { + { + setMargin(true); + addComponent(new Label( + "Nihil hic munitissimus habendi senatus locus, nihil horum? Sed haec quis possit intrepidus aestimare tellus.")); + } + }, "Third Caption", TestIcon.get()); + ac.addTab(new VerticalLayout() { + { + setMargin(true); + addComponent(new Label( + "Inmensae subtilitatis, obscuris et malesuada fames. Quisque ut dolor gravida, placerat libero vel, euismod.")); + } + }, "Custom Caption Style", TestIcon.get()).setStyleName("color1"); + return ac; + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java b/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java new file mode 100644 index 0000000000..ce08d9ba08 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/ButtonsAndLinks.java @@ -0,0 +1,180 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.server.ExternalResource; +import com.vaadin.ui.Button; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.Link; +import com.vaadin.ui.NativeButton; +import com.vaadin.ui.VerticalLayout; + +/** + * + * @since + * @author Vaadin Ltd + */ +public class ButtonsAndLinks extends VerticalLayout implements View { + /** + * + */ + public ButtonsAndLinks() { + setMargin(true); + + Label h1 = new Label("Buttons"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + Button button = new Button("Normal"); + row.addComponent(button); + + button = new Button("Disabled"); + button.setEnabled(false); + row.addComponent(button); + + button = new Button("Primary"); + button.addStyleName("primary"); + row.addComponent(button); + + button = new Button("Friendly"); + button.addStyleName("friendly"); + row.addComponent(button); + + button = new Button("Danger"); + button.addStyleName("danger"); + row.addComponent(button); + + button = new Button("Small"); + button.addStyleName("small"); + button.setIcon(TestIcon.get()); + row.addComponent(button); + + button = new Button("Large"); + button.addStyleName("large"); + button.setIcon(TestIcon.get()); + row.addComponent(button); + + button = new Button("Top"); + button.addStyleName("icon-align-top"); + button.setIcon(TestIcon.get()); + row.addComponent(button); + + button = new Button("Image icon"); + button.setIcon(TestIcon.get(true, 16)); + row.addComponent(button); + + button = new Button("Image icon"); + button.addStyleName("icon-align-right"); + button.setIcon(TestIcon.get(true)); + row.addComponent(button); + + button = new Button("Photos"); + button.setIcon(TestIcon.get()); + row.addComponent(button); + + button = new Button(); + button.setIcon(TestIcon.get()); + button.addStyleName("icon-only"); + row.addComponent(button); + + button = new Button("Borderless"); + button.setIcon(TestIcon.get()); + button.addStyleName("borderless"); + row.addComponent(button); + + button = new Button("Borderless, colored"); + button.setIcon(TestIcon.get()); + button.addStyleName("borderless-colored"); + row.addComponent(button); + + button = new Button("Quiet"); + button.setIcon(TestIcon.get()); + button.addStyleName("quiet"); + row.addComponent(button); + + button = new Button("Link style"); + button.setIcon(TestIcon.get()); + button.addStyleName("link"); + row.addComponent(button); + + button = new Button("Icon on right"); + button.setIcon(TestIcon.get()); + button.addStyleName("icon-align-right"); + row.addComponent(button); + + CssLayout group = new CssLayout(); + group.addStyleName("v-component-group"); + row.addComponent(group); + + button = new Button("One"); + group.addComponent(button); + button = new Button("Two"); + group.addComponent(button); + button = new Button("Three"); + group.addComponent(button); + + NativeButton nbutton = new NativeButton("Native"); + row.addComponent(nbutton); + + h1 = new Label("Links"); + h1.addStyleName("h1"); + addComponent(h1); + + row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + Link link = new Link("vaadin.com", new ExternalResource( + "https://vaadin.com")); + row.addComponent(link); + + link = new Link("Link with icon", new ExternalResource( + "https://vaadin.com")); + link.addStyleName("color3"); + link.setIcon(TestIcon.get()); + row.addComponent(link); + + link = new Link("Small", new ExternalResource("https://vaadin.com")); + link.addStyleName("small"); + row.addComponent(link); + + link = new Link("Large", new ExternalResource("https://vaadin.com")); + link.addStyleName("large"); + row.addComponent(link); + + link = new Link(null, new ExternalResource("https://vaadin.com")); + link.setIcon(TestIcon.get()); + link.addStyleName("large"); + row.addComponent(link); + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/CalendarTest.java b/uitest/src/com/vaadin/tests/themes/valo/CalendarTest.java new file mode 100644 index 0000000000..17dfd6cb67 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/CalendarTest.java @@ -0,0 +1,1278 @@ +package com.vaadin.tests.themes.valo; + +import java.text.DateFormatSymbols; +import java.util.Date; +import java.util.GregorianCalendar; +import java.util.Locale; +import java.util.Map; +import java.util.TimeZone; + +import com.vaadin.annotations.Theme; +import com.vaadin.data.Item; +import com.vaadin.data.Property; +import com.vaadin.data.Property.ValueChangeEvent; +import com.vaadin.data.Property.ValueChangeListener; +import com.vaadin.data.fieldgroup.FieldGroup; +import com.vaadin.data.fieldgroup.FieldGroup.CommitException; +import com.vaadin.data.util.BeanItem; +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.shared.ui.combobox.FilteringMode; +import com.vaadin.shared.ui.datefield.Resolution; +import com.vaadin.tests.components.calendar.CalendarTestEvent; +import com.vaadin.ui.Alignment; +import com.vaadin.ui.Button; +import com.vaadin.ui.Button.ClickEvent; +import com.vaadin.ui.Button.ClickListener; +import com.vaadin.ui.Calendar; +import com.vaadin.ui.Calendar.TimeFormat; +import com.vaadin.ui.CheckBox; +import com.vaadin.ui.ComboBox; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.DateField; +import com.vaadin.ui.FormLayout; +import com.vaadin.ui.GridLayout; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.Layout; +import com.vaadin.ui.TextArea; +import com.vaadin.ui.TextField; +import com.vaadin.ui.VerticalLayout; +import com.vaadin.ui.Window; +import com.vaadin.ui.components.calendar.CalendarComponentEvents.DateClickEvent; +import com.vaadin.ui.components.calendar.CalendarComponentEvents.EventClick; +import com.vaadin.ui.components.calendar.CalendarComponentEvents.EventClickHandler; +import com.vaadin.ui.components.calendar.CalendarComponentEvents.RangeSelectEvent; +import com.vaadin.ui.components.calendar.CalendarComponentEvents.RangeSelectHandler; +import com.vaadin.ui.components.calendar.CalendarComponentEvents.WeekClick; +import com.vaadin.ui.components.calendar.CalendarComponentEvents.WeekClickHandler; +import com.vaadin.ui.components.calendar.event.BasicEvent; +import com.vaadin.ui.components.calendar.event.BasicEventProvider; +import com.vaadin.ui.components.calendar.event.CalendarEvent; +import com.vaadin.ui.components.calendar.handler.BasicDateClickHandler; +import com.vaadin.ui.components.calendar.handler.BasicWeekClickHandler; + +/** Calendar component test application */ +@Theme("valo-test") +public class CalendarTest extends GridLayout implements View { + + private static final long serialVersionUID = -5436777475398410597L; + + private static final String DEFAULT_ITEMID = "DEFAULT"; + + private enum Mode { + MONTH, WEEK, DAY; + } + + /** + * This Gregorian calendar is used to control dates and time inside of this + * test application. + */ + private GregorianCalendar calendar; + + /** Target calendar component that this test application is made for. */ + private Calendar calendarComponent; + + private Date currentMonthsFirstDate; + + private final Label captionLabel = new Label(""); + + private Button monthButton; + + private Button weekButton; + + private Button dayButton; + + private Button nextButton; + + private Button prevButton; + + private ComboBox timeZoneSelect; + + private ComboBox formatSelect; + + private ComboBox localeSelect; + + private CheckBox hideWeekendsButton; + + private CheckBox readOnlyButton; + + private TextField captionField; + + private Window scheduleEventPopup; + + private final FormLayout scheduleEventFieldLayout = new FormLayout(); + private FieldGroup scheduleEventFieldGroup = new FieldGroup(); + + private Button deleteEventButton; + + private Button applyEventButton; + + private Mode viewMode = Mode.MONTH; + + private BasicEventProvider dataSource; + + private Button addNewEvent; + + /* + * When testBench is set to true, CalendarTest will have static content that + * is more suitable for Vaadin TestBench testing. Calendar will use a static + * date Mon 10 Jan 2000. Enable by starting the application with a + * "testBench" parameter in the URL. + */ + private boolean testBench = false; + + private String calendarHeight = null; + + private String calendarWidth = null; + + private CheckBox disabledButton; + + private Integer firstHour; + + private Integer lastHour; + + private Integer firstDay; + + private Integer lastDay; + + private Locale defaultLocale = Locale.US; + + private boolean showWeeklyView; + + private boolean useSecondResolution; + + private DateField startDateField; + private DateField endDateField; + + public CalendarTest() { + setSizeFull(); + setHeight("1000px"); + setMargin(true); + setSpacing(true); + + // handleURLParams(request.getParameterMap()); + + initContent(); + } + + private void handleURLParams(Map<String, String[]> parameters) { + testBench = parameters.containsKey("testBench") + || parameters.containsKey("?testBench"); + + if (parameters.containsKey("width")) { + calendarWidth = parameters.get("width")[0]; + } + + if (parameters.containsKey("height")) { + calendarHeight = parameters.get("height")[0]; + } + + if (parameters.containsKey("firstDay")) { + firstDay = Integer.parseInt(parameters.get("firstDay")[0]); + } + + if (parameters.containsKey("lastDay")) { + lastDay = Integer.parseInt(parameters.get("lastDay")[0]); + } + + if (parameters.containsKey("firstHour")) { + firstHour = Integer.parseInt(parameters.get("firstHour")[0]); + } + + if (parameters.containsKey("lastHour")) { + lastHour = Integer.parseInt(parameters.get("lastHour")[0]); + } + + if (parameters.containsKey("locale")) { + String localeArray[] = parameters.get("locale")[0].split("_"); + defaultLocale = new Locale(localeArray[0], localeArray[1]); + setLocale(defaultLocale); + } + + if (parameters.containsKey(("secondsResolution"))) { + useSecondResolution = true; + } + + showWeeklyView = parameters.containsKey("weekly"); + + } + + public void initContent() { + // Set default Locale for this application + if (testBench) { + setLocale(defaultLocale); + + } else { + setLocale(Locale.getDefault()); + } + + // Initialize locale, timezone and timeformat selects. + localeSelect = createLocaleSelect(); + timeZoneSelect = createTimeZoneSelect(); + formatSelect = createCalendarFormatSelect(); + + initCalendar(); + initLayoutContent(); + addInitialEvents(); + } + + private Date resolveFirstDateOfWeek(Date today, + java.util.Calendar currentCalendar) { + int firstDayOfWeek = currentCalendar.getFirstDayOfWeek(); + currentCalendar.setTime(today); + while (firstDayOfWeek != currentCalendar + .get(java.util.Calendar.DAY_OF_WEEK)) { + currentCalendar.add(java.util.Calendar.DATE, -1); + } + return currentCalendar.getTime(); + } + + private Date resolveLastDateOfWeek(Date today, + java.util.Calendar currentCalendar) { + currentCalendar.setTime(today); + currentCalendar.add(java.util.Calendar.DATE, 1); + int firstDayOfWeek = currentCalendar.getFirstDayOfWeek(); + // Roll to weeks last day using firstdayofweek. Roll until FDofW is + // found and then roll back one day. + while (firstDayOfWeek != currentCalendar + .get(java.util.Calendar.DAY_OF_WEEK)) { + currentCalendar.add(java.util.Calendar.DATE, 1); + } + currentCalendar.add(java.util.Calendar.DATE, -1); + return currentCalendar.getTime(); + } + + private void addInitialEvents() { + Date originalDate = calendar.getTime(); + Date today = getToday(); + + // Add a event that last a whole week + + Date start = resolveFirstDateOfWeek(today, calendar); + Date end = resolveLastDateOfWeek(today, calendar); + CalendarTestEvent event = getNewEvent("Whole week event", start, end); + event.setAllDay(true); + event.setStyleName("color4"); + event.setDescription("Description for the whole week event."); + dataSource.addEvent(event); + + // Add a allday event + calendar.setTime(start); + calendar.add(GregorianCalendar.DATE, 3); + start = calendar.getTime(); + end = start; + event = getNewEvent("All-day event", start, end); + event.setAllDay(true); + event.setDescription("Some description."); + event.setStyleName("color3"); + dataSource.addEvent(event); + + // Add a second allday event + calendar.add(GregorianCalendar.DATE, 1); + start = calendar.getTime(); + end = start; + event = getNewEvent("Second all-day event", start, end); + event.setAllDay(true); + event.setDescription("Some description."); + event.setStyleName("color2"); + dataSource.addEvent(event); + + calendar.add(GregorianCalendar.DATE, -3); + calendar.set(GregorianCalendar.HOUR_OF_DAY, 9); + calendar.set(GregorianCalendar.MINUTE, 30); + start = calendar.getTime(); + calendar.add(GregorianCalendar.HOUR_OF_DAY, 5); + calendar.set(GregorianCalendar.MINUTE, 0); + end = calendar.getTime(); + event = getNewEvent("Appointment", start, end); + event.setWhere("Office"); + event.setStyleName("color1"); + event.setDescription("A longer description, which should display correctly."); + dataSource.addEvent(event); + + calendar.add(GregorianCalendar.DATE, 1); + calendar.set(GregorianCalendar.HOUR_OF_DAY, 11); + calendar.set(GregorianCalendar.MINUTE, 0); + start = calendar.getTime(); + calendar.add(GregorianCalendar.HOUR_OF_DAY, 8); + end = calendar.getTime(); + event = getNewEvent("Training", start, end); + event.setStyleName("color2"); + dataSource.addEvent(event); + + calendar.add(GregorianCalendar.DATE, 4); + calendar.set(GregorianCalendar.HOUR_OF_DAY, 9); + calendar.set(GregorianCalendar.MINUTE, 0); + start = calendar.getTime(); + calendar.add(GregorianCalendar.HOUR_OF_DAY, 9); + end = calendar.getTime(); + event = getNewEvent("Free time", start, end); + dataSource.addEvent(event); + + calendar.setTime(originalDate); + } + + private void initLayoutContent() { + initNavigationButtons(); + initHideWeekEndButton(); + initReadOnlyButton(); + initDisabledButton(); + initAddNewEventButton(); + + HorizontalLayout hl = new HorizontalLayout(); + hl.setWidth("100%"); + hl.setSpacing(true); + hl.addComponent(prevButton); + hl.addComponent(captionLabel); + + CssLayout group = new CssLayout(); + group.addStyleName("v-component-group"); + group.addComponent(dayButton); + group.addComponent(weekButton); + group.addComponent(monthButton); + hl.addComponent(group); + + hl.addComponent(nextButton); + hl.setComponentAlignment(prevButton, Alignment.MIDDLE_LEFT); + hl.setComponentAlignment(captionLabel, Alignment.MIDDLE_CENTER); + hl.setComponentAlignment(group, Alignment.MIDDLE_CENTER); + hl.setComponentAlignment(nextButton, Alignment.MIDDLE_RIGHT); + + // monthButton.setVisible(viewMode == Mode.WEEK); + // weekButton.setVisible(viewMode == Mode.DAY); + + HorizontalLayout controlPanel = new HorizontalLayout(); + controlPanel.setSpacing(true); + controlPanel.setWidth("100%"); + controlPanel.addComponent(localeSelect); + controlPanel.addComponent(timeZoneSelect); + controlPanel.addComponent(formatSelect); + controlPanel.addComponent(hideWeekendsButton); + controlPanel.addComponent(readOnlyButton); + controlPanel.addComponent(disabledButton); + controlPanel.addComponent(addNewEvent); + + controlPanel.setComponentAlignment(timeZoneSelect, + Alignment.MIDDLE_LEFT); + controlPanel.setComponentAlignment(formatSelect, Alignment.MIDDLE_LEFT); + controlPanel.setComponentAlignment(localeSelect, Alignment.MIDDLE_LEFT); + controlPanel.setComponentAlignment(hideWeekendsButton, + Alignment.MIDDLE_LEFT); + controlPanel.setComponentAlignment(readOnlyButton, + Alignment.MIDDLE_LEFT); + controlPanel.setComponentAlignment(disabledButton, + Alignment.MIDDLE_LEFT); + controlPanel.setComponentAlignment(addNewEvent, Alignment.MIDDLE_LEFT); + + addComponent(controlPanel); + addComponent(hl); + addComponent(calendarComponent); + setRowExpandRatio(getRows() - 1, 1.0f); + } + + private void initNavigationButtons() { + monthButton = new Button("Month", new ClickListener() { + + private static final long serialVersionUID = 1L; + + @Override + public void buttonClick(ClickEvent event) { + switchToMonthView(); + } + }); + + weekButton = new Button("Week", new ClickListener() { + + private static final long serialVersionUID = 1L; + + @Override + public void buttonClick(ClickEvent event) { + // simulate week click + WeekClickHandler handler = (WeekClickHandler) calendarComponent + .getHandler(WeekClick.EVENT_ID); + handler.weekClick(new WeekClick(calendarComponent, calendar + .get(GregorianCalendar.WEEK_OF_YEAR), calendar + .get(GregorianCalendar.YEAR))); + } + }); + + dayButton = new Button("Day", new ClickListener() { + + private static final long serialVersionUID = 1L; + + @Override + public void buttonClick(ClickEvent event) { + // simulate day click + BasicDateClickHandler handler = (BasicDateClickHandler) calendarComponent + .getHandler(DateClickEvent.EVENT_ID); + handler.dateClick(new DateClickEvent(calendarComponent, + calendar.getTime())); + } + }); + + nextButton = new Button("Next", new Button.ClickListener() { + private static final long serialVersionUID = 1L; + + @Override + public void buttonClick(ClickEvent event) { + handleNextButtonClick(); + } + }); + + prevButton = new Button("Prev", new Button.ClickListener() { + private static final long serialVersionUID = 1L; + + @Override + public void buttonClick(ClickEvent event) { + handlePreviousButtonClick(); + } + }); + } + + private void initHideWeekEndButton() { + hideWeekendsButton = new CheckBox("Hide weekends"); + hideWeekendsButton.setImmediate(true); + hideWeekendsButton + .addValueChangeListener(new Property.ValueChangeListener() { + + private static final long serialVersionUID = 1L; + + @Override + public void valueChange(ValueChangeEvent event) { + setWeekendsHidden(hideWeekendsButton.getValue()); + } + }); + } + + private void setWeekendsHidden(boolean weekendsHidden) { + if (weekendsHidden) { + int firstToShow = (GregorianCalendar.MONDAY - calendar + .getFirstDayOfWeek()) % 7; + calendarComponent.setFirstVisibleDayOfWeek(firstToShow + 1); + calendarComponent.setLastVisibleDayOfWeek(firstToShow + 5); + } else { + calendarComponent.setFirstVisibleDayOfWeek(1); + calendarComponent.setLastVisibleDayOfWeek(7); + } + + } + + private void initReadOnlyButton() { + readOnlyButton = new CheckBox("Read-only mode"); + readOnlyButton.setImmediate(true); + readOnlyButton + .addValueChangeListener(new Property.ValueChangeListener() { + + private static final long serialVersionUID = 1L; + + @Override + public void valueChange(ValueChangeEvent event) { + calendarComponent.setReadOnly(readOnlyButton.getValue()); + } + }); + } + + private void initDisabledButton() { + disabledButton = new CheckBox("Disabled"); + disabledButton.setImmediate(true); + disabledButton + .addValueChangeListener(new Property.ValueChangeListener() { + + private static final long serialVersionUID = 1L; + + @Override + public void valueChange(ValueChangeEvent event) { + calendarComponent.setEnabled(!disabledButton.getValue()); + } + }); + } + + public void initAddNewEventButton() { + addNewEvent = new Button("Add new event"); + addNewEvent.addClickListener(new Button.ClickListener() { + + private static final long serialVersionUID = -8307244759142541067L; + + @Override + public void buttonClick(ClickEvent event) { + Date start = getToday(); + start.setHours(0); + start.setMinutes(0); + start.setSeconds(0); + + Date end = getEndOfDay(calendar, start); + + showEventPopup(createNewEvent(start, end), true); + } + }); + } + + private void initFormFields(Layout formLayout, + Class<? extends CalendarEvent> eventClass) { + + startDateField = createDateField("Start date"); + endDateField = createDateField("End date"); + + final CheckBox allDayField = createCheckBox("All-day"); + allDayField.addValueChangeListener(new Property.ValueChangeListener() { + + private static final long serialVersionUID = -7104996493482558021L; + + @Override + public void valueChange(ValueChangeEvent event) { + Object value = event.getProperty().getValue(); + if (value instanceof Boolean && Boolean.TRUE.equals(value)) { + setFormDateResolution(Resolution.DAY); + + } else { + setFormDateResolution(Resolution.MINUTE); + } + } + + }); + + captionField = createTextField("Caption"); + captionField.setInputPrompt("Event name"); + captionField.setRequired(true); + final TextField whereField = createTextField("Where"); + whereField.setInputPrompt("Address or location"); + final TextArea descriptionField = createTextArea("Description"); + descriptionField.setInputPrompt("Describe the event"); + descriptionField.setRows(3); + // descriptionField.setRequired(true); + + final ComboBox styleNameField = createStyleNameComboBox(); + styleNameField.setInputPrompt("Choose calendar"); + styleNameField.setTextInputAllowed(false); + + formLayout.addComponent(startDateField); + // startDateField.setRequired(true); + formLayout.addComponent(endDateField); + formLayout.addComponent(allDayField); + formLayout.addComponent(captionField); + // captionField.setComponentError(new UserError("Testing error")); + if (eventClass == CalendarTestEvent.class) { + formLayout.addComponent(whereField); + } + formLayout.addComponent(descriptionField); + formLayout.addComponent(styleNameField); + + scheduleEventFieldGroup.bind(startDateField, "start"); + scheduleEventFieldGroup.bind(endDateField, "end"); + scheduleEventFieldGroup.bind(captionField, "caption"); + scheduleEventFieldGroup.bind(descriptionField, "description"); + if (eventClass == CalendarTestEvent.class) { + scheduleEventFieldGroup.bind(whereField, "where"); + } + scheduleEventFieldGroup.bind(styleNameField, "styleName"); + scheduleEventFieldGroup.bind(allDayField, "allDay"); + } + + private CheckBox createCheckBox(String caption) { + CheckBox cb = new CheckBox(caption); + cb.setImmediate(true); + return cb; + } + + private TextField createTextField(String caption) { + TextField f = new TextField(caption); + f.setNullRepresentation(""); + return f; + } + + private TextArea createTextArea(String caption) { + TextArea f = new TextArea(caption); + f.setNullRepresentation(""); + return f; + } + + private DateField createDateField(String caption) { + DateField f = new DateField(caption); + if (useSecondResolution) { + f.setResolution(Resolution.SECOND); + } else { + f.setResolution(Resolution.MINUTE); + } + return f; + } + + private ComboBox createStyleNameComboBox() { + ComboBox s = new ComboBox("Calendar"); + s.addContainerProperty("c", String.class, ""); + s.setItemCaptionPropertyId("c"); + Item i = s.addItem("color1"); + i.getItemProperty("c").setValue("Work"); + i = s.addItem("color2"); + i.getItemProperty("c").setValue("Personal"); + i = s.addItem("color3"); + i.getItemProperty("c").setValue("Family"); + i = s.addItem("color4"); + i.getItemProperty("c").setValue("Hobbies"); + return s; + } + + private void initCalendar() { + dataSource = new BasicEventProvider(); + + calendarComponent = new Calendar(dataSource); + calendarComponent.setLocale(getLocale()); + calendarComponent.setImmediate(true); + + if (calendarWidth != null || calendarHeight != null) { + if (calendarHeight != null) { + calendarComponent.setHeight(calendarHeight); + } + if (calendarWidth != null) { + calendarComponent.setWidth(calendarWidth); + } + } else { + calendarComponent.setSizeFull(); + } + + if (firstHour != null && lastHour != null) { + calendarComponent.setFirstVisibleHourOfDay(firstHour); + calendarComponent.setLastVisibleHourOfDay(lastHour); + } + + if (firstDay != null && lastDay != null) { + calendarComponent.setFirstVisibleDayOfWeek(firstDay); + calendarComponent.setLastVisibleDayOfWeek(lastDay); + } + + Date today = getToday(); + calendar = new GregorianCalendar(getLocale()); + calendar.setTime(today); + calendarComponent.getInternalCalendar().setTime(today); + + int rollAmount = calendar.get(GregorianCalendar.DAY_OF_MONTH) - 1; + calendar.add(GregorianCalendar.DAY_OF_MONTH, -rollAmount); + currentMonthsFirstDate = calendar.getTime(); + + updateCaptionLabel(); + + if (!showWeeklyView) { + // resetTime(false); + // currentMonthsFirstDate = calendar.getTime(); + // calendarComponent.setStartDate(currentMonthsFirstDate); + // calendar.add(GregorianCalendar.MONTH, 1); + // calendar.add(GregorianCalendar.DATE, -1); + // calendarComponent.setEndDate(calendar.getTime()); + } + + addCalendarEventListeners(); + } + + private Date getToday() { + if (testBench) { + GregorianCalendar testDate = new GregorianCalendar(); + testDate.set(GregorianCalendar.YEAR, 2000); + testDate.set(GregorianCalendar.MONTH, 0); + testDate.set(GregorianCalendar.DATE, 10); + testDate.set(GregorianCalendar.HOUR_OF_DAY, 0); + testDate.set(GregorianCalendar.MINUTE, 0); + testDate.set(GregorianCalendar.SECOND, 0); + testDate.set(GregorianCalendar.MILLISECOND, 0); + return testDate.getTime(); + } + return new Date(); + } + + @SuppressWarnings("serial") + private void addCalendarEventListeners() { + // Register week clicks by changing the schedules start and end dates. + calendarComponent.setHandler(new BasicWeekClickHandler() { + + @Override + public void weekClick(WeekClick event) { + // let BasicWeekClickHandler handle calendar dates, and update + // only the other parts of UI here + super.weekClick(event); + updateCaptionLabel(); + switchToWeekView(); + } + }); + + calendarComponent.setHandler(new EventClickHandler() { + + @Override + public void eventClick(EventClick event) { + showEventPopup(event.getCalendarEvent(), false); + } + }); + + calendarComponent.setHandler(new BasicDateClickHandler() { + + @Override + public void dateClick(DateClickEvent event) { + // let BasicDateClickHandler handle calendar dates, and update + // only the other parts of UI here + super.dateClick(event); + switchToDayView(); + } + }); + + calendarComponent.setHandler(new RangeSelectHandler() { + + @Override + public void rangeSelect(RangeSelectEvent event) { + handleRangeSelect(event); + } + }); + } + + private ComboBox createTimeZoneSelect() { + ComboBox s = new ComboBox("Timezone"); + s.addContainerProperty("caption", String.class, ""); + s.setItemCaptionPropertyId("caption"); + s.setFilteringMode(FilteringMode.CONTAINS); + + Item i = s.addItem(DEFAULT_ITEMID); + i.getItemProperty("caption").setValue( + "Default (" + TimeZone.getDefault().getID() + ")"); + for (String id : TimeZone.getAvailableIDs()) { + if (!s.containsId(id)) { + i = s.addItem(id); + i.getItemProperty("caption").setValue(id); + } + } + + if (testBench) { + s.select("America/New_York"); + } else { + s.select(DEFAULT_ITEMID); + } + s.setImmediate(true); + s.addValueChangeListener(new ValueChangeListener() { + + private static final long serialVersionUID = 1L; + + @Override + public void valueChange(ValueChangeEvent event) { + + updateCalendarTimeZone(event.getProperty().getValue()); + } + }); + + return s; + } + + private ComboBox createCalendarFormatSelect() { + ComboBox s = new ComboBox("Calendar format"); + s.addContainerProperty("caption", String.class, ""); + s.setItemCaptionPropertyId("caption"); + + Item i = s.addItem(DEFAULT_ITEMID); + i.getItemProperty("caption").setValue("Default by locale"); + i = s.addItem(TimeFormat.Format12H); + i.getItemProperty("caption").setValue("12H"); + i = s.addItem(TimeFormat.Format24H); + i.getItemProperty("caption").setValue("24H"); + + s.select(DEFAULT_ITEMID); + s.setImmediate(true); + s.addValueChangeListener(new ValueChangeListener() { + + private static final long serialVersionUID = 1L; + + @Override + public void valueChange(ValueChangeEvent event) { + updateCalendarFormat(event.getProperty().getValue()); + } + }); + + return s; + } + + private ComboBox createLocaleSelect() { + ComboBox s = new ComboBox("Locale"); + s.addContainerProperty("caption", String.class, ""); + s.setItemCaptionPropertyId("caption"); + s.setFilteringMode(FilteringMode.CONTAINS); + + for (Locale l : Locale.getAvailableLocales()) { + if (!s.containsId(l)) { + Item i = s.addItem(l); + i.getItemProperty("caption").setValue(getLocaleItemCaption(l)); + } + } + + s.select(getLocale()); + s.setImmediate(true); + s.addValueChangeListener(new ValueChangeListener() { + + private static final long serialVersionUID = 1L; + + @Override + public void valueChange(ValueChangeEvent event) { + updateCalendarLocale((Locale) event.getProperty().getValue()); + } + }); + + return s; + } + + private void updateCalendarTimeZone(Object timezoneId) { + TimeZone tz = null; + if (!DEFAULT_ITEMID.equals(timezoneId)) { + tz = TimeZone.getTimeZone((String) timezoneId); + } + + // remember the week that was showing, so we can re-set it later + Date startDate = calendarComponent.getStartDate(); + calendar.setTime(startDate); + int weekNumber = calendar.get(java.util.Calendar.WEEK_OF_YEAR); + calendarComponent.setTimeZone(tz); + calendar.setTimeZone(calendarComponent.getTimeZone()); + + if (viewMode == Mode.WEEK) { + calendar.set(java.util.Calendar.WEEK_OF_YEAR, weekNumber); + calendar.set(java.util.Calendar.DAY_OF_WEEK, + calendar.getFirstDayOfWeek()); + + calendarComponent.setStartDate(calendar.getTime()); + calendar.add(java.util.Calendar.DATE, 6); + calendarComponent.setEndDate(calendar.getTime()); + } + } + + private void updateCalendarFormat(Object format) { + TimeFormat calFormat = null; + if (format instanceof TimeFormat) { + calFormat = (TimeFormat) format; + } + + calendarComponent.setTimeFormat(calFormat); + } + + private String getLocaleItemCaption(Locale l) { + String country = l.getDisplayCountry(getLocale()); + String language = l.getDisplayLanguage(getLocale()); + StringBuilder caption = new StringBuilder(country); + if (caption.length() != 0) { + caption.append(", "); + } + caption.append(language); + return caption.toString(); + } + + private void updateCalendarLocale(Locale l) { + int oldFirstDayOfWeek = calendar.getFirstDayOfWeek(); + setLocale(l); + calendarComponent.setLocale(l); + calendar = new GregorianCalendar(l); + int newFirstDayOfWeek = calendar.getFirstDayOfWeek(); + + // we are showing 1 week, and the first day of the week has changed + // update start and end dates so that the same week is showing + if (viewMode == Mode.WEEK && oldFirstDayOfWeek != newFirstDayOfWeek) { + calendar.setTime(calendarComponent.getStartDate()); + calendar.add(java.util.Calendar.DAY_OF_WEEK, 2); + // starting at the beginning of the week + calendar.set(GregorianCalendar.DAY_OF_WEEK, newFirstDayOfWeek); + Date start = calendar.getTime(); + + // ending at the end of the week + calendar.add(GregorianCalendar.DATE, 6); + Date end = calendar.getTime(); + + calendarComponent.setStartDate(start); + calendarComponent.setEndDate(end); + + // Week days depend on locale so this must be refreshed + setWeekendsHidden(hideWeekendsButton.getValue()); + } + + } + + private void handleNextButtonClick() { + switch (viewMode) { + case MONTH: + nextMonth(); + break; + case WEEK: + nextWeek(); + break; + case DAY: + nextDay(); + break; + } + } + + private void handlePreviousButtonClick() { + switch (viewMode) { + case MONTH: + previousMonth(); + break; + case WEEK: + previousWeek(); + break; + case DAY: + previousDay(); + break; + } + } + + private void handleRangeSelect(RangeSelectEvent event) { + Date start = event.getStart(); + Date end = event.getEnd(); + + /* + * If a range of dates is selected in monthly mode, we want it to end at + * the end of the last day. + */ + if (event.isMonthlyMode()) { + end = getEndOfDay(calendar, end); + } + + showEventPopup(createNewEvent(start, end), true); + } + + private void showEventPopup(CalendarEvent event, boolean newEvent) { + if (event == null) { + return; + } + + updateCalendarEventPopup(newEvent); + updateCalendarEventForm(event); + // TODO this only works the first time + captionField.focus(); + + if (!getUI().getWindows().contains(scheduleEventPopup)) { + getUI().addWindow(scheduleEventPopup); + } + + } + + /* Initializes a modal window to edit schedule event. */ + private void createCalendarEventPopup() { + VerticalLayout layout = new VerticalLayout(); + // layout.setMargin(true); + layout.setSpacing(true); + + scheduleEventPopup = new Window(null, layout); + scheduleEventPopup.setWidth("300px"); + scheduleEventPopup.setModal(true); + scheduleEventPopup.center(); + + scheduleEventFieldLayout.addStyleName("light"); + scheduleEventFieldLayout.setMargin(false); + layout.addComponent(scheduleEventFieldLayout); + + applyEventButton = new Button("Apply", new ClickListener() { + + private static final long serialVersionUID = 1L; + + @Override + public void buttonClick(ClickEvent event) { + try { + commitCalendarEvent(); + } catch (CommitException e) { + e.printStackTrace(); + } + } + }); + applyEventButton.addStyleName("primary"); + Button cancel = new Button("Cancel", new ClickListener() { + + private static final long serialVersionUID = 1L; + + @Override + public void buttonClick(ClickEvent event) { + discardCalendarEvent(); + } + }); + deleteEventButton = new Button("Delete", new ClickListener() { + + private static final long serialVersionUID = 1L; + + @Override + public void buttonClick(ClickEvent event) { + deleteCalendarEvent(); + } + }); + deleteEventButton.addStyleName("borderless"); + scheduleEventPopup.addCloseListener(new Window.CloseListener() { + + private static final long serialVersionUID = 1L; + + @Override + public void windowClose(Window.CloseEvent e) { + discardCalendarEvent(); + } + }); + + HorizontalLayout buttons = new HorizontalLayout(); + buttons.addStyleName("v-window-bottom-toolbar"); + buttons.setWidth("100%"); + buttons.setSpacing(true); + buttons.addComponent(deleteEventButton); + buttons.addComponent(applyEventButton); + buttons.setExpandRatio(applyEventButton, 1); + buttons.setComponentAlignment(applyEventButton, Alignment.TOP_RIGHT); + buttons.addComponent(cancel); + layout.addComponent(buttons); + + } + + private void updateCalendarEventPopup(boolean newEvent) { + if (scheduleEventPopup == null) { + createCalendarEventPopup(); + } + + if (newEvent) { + scheduleEventPopup.setCaption("New event"); + } else { + scheduleEventPopup.setCaption("Edit event"); + } + + deleteEventButton.setVisible(!newEvent); + deleteEventButton.setEnabled(!calendarComponent.isReadOnly()); + applyEventButton.setEnabled(!calendarComponent.isReadOnly()); + } + + private void updateCalendarEventForm(CalendarEvent event) { + BeanItem<CalendarEvent> item = new BeanItem<CalendarEvent>(event); + scheduleEventFieldLayout.removeAllComponents(); + scheduleEventFieldGroup = new FieldGroup(); + initFormFields(scheduleEventFieldLayout, event.getClass()); + scheduleEventFieldGroup.setBuffered(true); + scheduleEventFieldGroup.setItemDataSource(item); + } + + private void setFormDateResolution(Resolution resolution) { + if (startDateField != null && endDateField != null) { + startDateField.setResolution(resolution); + endDateField.setResolution(resolution); + } + } + + private CalendarEvent createNewEvent(Date startDate, Date endDate) { + BasicEvent event = new BasicEvent(); + event.setCaption(""); + event.setStart(startDate); + event.setEnd(endDate); + event.setStyleName("color1"); + return event; + } + + /* Removes the event from the data source and fires change event. */ + private void deleteCalendarEvent() { + BasicEvent event = getFormCalendarEvent(); + if (dataSource.containsEvent(event)) { + dataSource.removeEvent(event); + } + getUI().removeWindow(scheduleEventPopup); + } + + /* Adds/updates the event in the data source and fires change event. */ + private void commitCalendarEvent() throws CommitException { + scheduleEventFieldGroup.commit(); + BasicEvent event = getFormCalendarEvent(); + if (event.getEnd() == null) { + event.setEnd(event.getStart()); + } + if (!dataSource.containsEvent(event)) { + dataSource.addEvent(event); + } + + getUI().removeWindow(scheduleEventPopup); + } + + private void discardCalendarEvent() { + scheduleEventFieldGroup.discard(); + getUI().removeWindow(scheduleEventPopup); + } + + @SuppressWarnings("unchecked") + private BasicEvent getFormCalendarEvent() { + BeanItem<CalendarEvent> item = (BeanItem<CalendarEvent>) scheduleEventFieldGroup + .getItemDataSource(); + CalendarEvent event = item.getBean(); + return (BasicEvent) event; + } + + private void nextMonth() { + rollMonth(1); + } + + private void previousMonth() { + rollMonth(-1); + } + + private void nextWeek() { + rollWeek(1); + } + + private void previousWeek() { + rollWeek(-1); + } + + private void nextDay() { + rollDate(1); + } + + private void previousDay() { + rollDate(-1); + } + + private void rollMonth(int direction) { + calendar.setTime(currentMonthsFirstDate); + calendar.add(GregorianCalendar.MONTH, direction); + resetTime(false); + currentMonthsFirstDate = calendar.getTime(); + calendarComponent.setStartDate(currentMonthsFirstDate); + + updateCaptionLabel(); + + calendar.add(GregorianCalendar.MONTH, 1); + calendar.add(GregorianCalendar.DATE, -1); + resetCalendarTime(true); + } + + private void rollWeek(int direction) { + calendar.add(GregorianCalendar.WEEK_OF_YEAR, direction); + calendar.set(GregorianCalendar.DAY_OF_WEEK, + calendar.getFirstDayOfWeek()); + resetCalendarTime(false); + resetTime(true); + calendar.add(GregorianCalendar.DATE, 6); + calendarComponent.setEndDate(calendar.getTime()); + } + + private void rollDate(int direction) { + calendar.add(GregorianCalendar.DATE, direction); + resetCalendarTime(false); + resetCalendarTime(true); + } + + private void updateCaptionLabel() { + DateFormatSymbols s = new DateFormatSymbols(getLocale()); + String month = s.getShortMonths()[calendar.get(GregorianCalendar.MONTH)]; + captionLabel.setValue(month + " " + + calendar.get(GregorianCalendar.YEAR)); + } + + private CalendarTestEvent getNewEvent(String caption, Date start, Date end) { + CalendarTestEvent event = new CalendarTestEvent(); + event.setCaption(caption); + event.setStart(start); + event.setEnd(end); + + return event; + } + + /* + * Switch the view to week view. + */ + public void switchToWeekView() { + viewMode = Mode.WEEK; + // weekButton.setVisible(false); + // monthButton.setVisible(true); + } + + /* + * Switch the Calendar component's start and end date range to the target + * month only. (sample range: 01.01.2010 00:00.000 - 31.01.2010 23:59.999) + */ + public void switchToMonthView() { + viewMode = Mode.MONTH; + // monthButton.setVisible(false); + // weekButton.setVisible(false); + + int rollAmount = calendar.get(GregorianCalendar.DAY_OF_MONTH) - 1; + calendar.add(GregorianCalendar.DAY_OF_MONTH, -rollAmount); + + calendarComponent.setStartDate(calendar.getTime()); + + updateCaptionLabel(); + + calendar.add(GregorianCalendar.MONTH, 1); + calendar.add(GregorianCalendar.DATE, -1); + + calendarComponent.setEndDate(calendar.getTime()); + + calendar.setTime(getToday()); + // resetCalendarTime(true); + } + + /* + * Switch to day view (week view with a single day visible). + */ + public void switchToDayView() { + viewMode = Mode.DAY; + // monthButton.setVisible(true); + // weekButton.setVisible(true); + } + + private void resetCalendarTime(boolean resetEndTime) { + resetTime(resetEndTime); + if (resetEndTime) { + calendarComponent.setEndDate(calendar.getTime()); + } else { + calendarComponent.setStartDate(calendar.getTime()); + updateCaptionLabel(); + } + } + + /* + * Resets the calendar time (hour, minute second and millisecond) either to + * zero or maximum value. + */ + private void resetTime(boolean max) { + if (max) { + calendar.set(GregorianCalendar.HOUR_OF_DAY, + calendar.getMaximum(GregorianCalendar.HOUR_OF_DAY)); + calendar.set(GregorianCalendar.MINUTE, + calendar.getMaximum(GregorianCalendar.MINUTE)); + calendar.set(GregorianCalendar.SECOND, + calendar.getMaximum(GregorianCalendar.SECOND)); + calendar.set(GregorianCalendar.MILLISECOND, + calendar.getMaximum(GregorianCalendar.MILLISECOND)); + } else { + calendar.set(GregorianCalendar.HOUR_OF_DAY, 0); + calendar.set(GregorianCalendar.MINUTE, 0); + calendar.set(GregorianCalendar.SECOND, 0); + calendar.set(GregorianCalendar.MILLISECOND, 0); + } + } + + private static Date getEndOfDay(java.util.Calendar calendar, Date date) { + java.util.Calendar calendarClone = (java.util.Calendar) calendar + .clone(); + + calendarClone.setTime(date); + calendarClone.set(java.util.Calendar.MILLISECOND, + calendarClone.getActualMaximum(java.util.Calendar.MILLISECOND)); + calendarClone.set(java.util.Calendar.SECOND, + calendarClone.getActualMaximum(java.util.Calendar.SECOND)); + calendarClone.set(java.util.Calendar.MINUTE, + calendarClone.getActualMaximum(java.util.Calendar.MINUTE)); + calendarClone.set(java.util.Calendar.HOUR, + calendarClone.getActualMaximum(java.util.Calendar.HOUR)); + calendarClone.set(java.util.Calendar.HOUR_OF_DAY, + calendarClone.getActualMaximum(java.util.Calendar.HOUR_OF_DAY)); + + return calendarClone.getTime(); + } + + private static Date getStartOfDay(java.util.Calendar calendar, Date date) { + java.util.Calendar calendarClone = (java.util.Calendar) calendar + .clone(); + + calendarClone.setTime(date); + calendarClone.set(java.util.Calendar.MILLISECOND, 0); + calendarClone.set(java.util.Calendar.SECOND, 0); + calendarClone.set(java.util.Calendar.MINUTE, 0); + calendarClone.set(java.util.Calendar.HOUR, 0); + calendarClone.set(java.util.Calendar.HOUR_OF_DAY, 0); + + return calendarClone.getTime(); + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } +}
\ No newline at end of file diff --git a/uitest/src/com/vaadin/tests/themes/valo/CheckBoxes.java b/uitest/src/com/vaadin/tests/themes/valo/CheckBoxes.java new file mode 100644 index 0000000000..a2daeff2f8 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/CheckBoxes.java @@ -0,0 +1,194 @@ +/* + * Copyright 2000-2013 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.data.Item; +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.ui.CheckBox; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.OptionGroup; +import com.vaadin.ui.VerticalLayout; + +public class CheckBoxes extends VerticalLayout implements View { + public CheckBoxes() { + setMargin(true); + + Label h1 = new Label("Check Boxes"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + CheckBox check = new CheckBox("Checked", true); + row.addComponent(check); + + check = new CheckBox( + "Checked, explicit width, so that the caption should wrap", + true); + row.addComponent(check); + check.setWidth("150px"); + + check = new CheckBox("Not checked"); + row.addComponent(check); + + check = new CheckBox(null, true); + check.setDescription("No caption"); + row.addComponent(check); + + check = new CheckBox("Custom color", true); + check.addStyleName("color1"); + row.addComponent(check); + + check = new CheckBox("Custom color", true); + check.addStyleName("color2"); + check.setIcon(TestIcon.get()); + row.addComponent(check); + + check = new CheckBox("With Icon", true); + check.setIcon(TestIcon.get()); + row.addComponent(check); + + check = new CheckBox(); + check.setIcon(TestIcon.get(true)); + row.addComponent(check); + + check = new CheckBox("Small", true); + check.addStyleName("small"); + row.addComponent(check); + + check = new CheckBox("Large", true); + check.addStyleName("large"); + row.addComponent(check); + + h1 = new Label("Option Groups"); + h1.addStyleName("h1"); + addComponent(h1); + + row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + OptionGroup options = new OptionGroup("Choose one, explicit width"); + options.setWidth("200px"); + options.addItem("Option One"); + Item two = options + .addItem("Option Two, with a longer caption that should wrap when the components width is explicitly set."); + options.addItem("Option Three"); + options.select("Option One"); + options.setItemIcon("Option One", TestIcon.get()); + options.setItemIcon(two, TestIcon.get()); + options.setItemIcon("Option Three", TestIcon.get(true)); + row.addComponent(options); + + options = new OptionGroup("Choose many, explicit width"); + options.setMultiSelect(true); + options.setWidth("200px"); + options.addItem("Option One"); + two = options + .addItem("Option Two, with a longer caption that should wrap when the components width is explicitly set."); + options.addItem("Option Three"); + options.select("Option One"); + options.setItemIcon("Option One", TestIcon.get()); + options.setItemIcon(two, TestIcon.get()); + options.setItemIcon("Option Three", TestIcon.get(true)); + row.addComponent(options); + + options = new OptionGroup("Choose one, small"); + options.addStyleName("small"); + options.setMultiSelect(false); + options.addItem("Option One"); + options.addItem("Option Two"); + options.addItem("Option Three"); + options.select("Option One"); + options.setItemIcon("Option One", TestIcon.get()); + options.setItemIcon("Option Two", TestIcon.get()); + options.setItemIcon("Option Three", TestIcon.get(true)); + row.addComponent(options); + + options = new OptionGroup("Choose many, small"); + options.addStyleName("small"); + options.setMultiSelect(true); + options.addItem("Option One"); + options.addItem("Option Two"); + options.addItem("Option Three"); + options.select("Option One"); + options.setItemIcon("Option One", TestIcon.get()); + options.setItemIcon("Option Two", TestIcon.get()); + options.setItemIcon("Option Three", TestIcon.get(true)); + row.addComponent(options); + + options = new OptionGroup("Choose one, large"); + options.addStyleName("large"); + options.setMultiSelect(false); + options.addItem("Option One"); + options.addItem("Option Two"); + options.addItem("Option Three"); + options.select("Option One"); + options.setItemIcon("Option One", TestIcon.get()); + options.setItemIcon("Option Two", TestIcon.get()); + options.setItemIcon("Option Three", TestIcon.get(true)); + row.addComponent(options); + + options = new OptionGroup("Choose many, large"); + options.addStyleName("large"); + options.setMultiSelect(true); + options.addItem("Option One"); + options.addItem("Option Two"); + options.addItem("Option Three"); + options.select("Option One"); + options.setItemIcon("Option One", TestIcon.get()); + options.setItemIcon("Option Two", TestIcon.get()); + options.setItemIcon("Option Three", TestIcon.get(true)); + row.addComponent(options); + + options = new OptionGroup("Horizontal items"); + options.addStyleName("horizontal"); + options.addItem("Option One"); + two = options.addItem("Option Two, with a longer caption"); + options.addItem("Option Three"); + options.select("Option One"); + options.setItemIcon("Option One", TestIcon.get()); + options.setItemIcon(two, TestIcon.get()); + options.setItemIcon("Option Three", TestIcon.get()); + row.addComponent(options); + + options = new OptionGroup("Horizontal items, explicit width"); + options.setMultiSelect(true); + options.setWidth("500px"); + options.addStyleName("horizontal"); + options.addItem("Option One"); + two = options.addItem("Option Two, with a longer caption"); + options.addItem("Option Three"); + options.select("Option One"); + options.setItemIcon("Option One", TestIcon.get()); + options.setItemIcon(two, TestIcon.get()); + options.setItemIcon("Option Three", TestIcon.get()); + row.addComponent(options); + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/ColorPickers.java b/uitest/src/com/vaadin/tests/themes/valo/ColorPickers.java new file mode 100644 index 0000000000..b841b0b116 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/ColorPickers.java @@ -0,0 +1,58 @@ +/* + * Copyright 2000-2013 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.shared.ui.colorpicker.Color; +import com.vaadin.ui.AbstractColorPicker.PopupStyle; +import com.vaadin.ui.ColorPicker; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.VerticalLayout; + +public class ColorPickers extends VerticalLayout implements View { + public ColorPickers() { + setMargin(true); + + Label h1 = new Label("Color Pickers"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + ColorPicker cp = new ColorPicker(); + cp.setDefaultCaptionEnabled(true); + cp.setIcon(TestIcon.get()); + cp.setColor(new Color(138, 73, 115)); + row.addComponent(cp); + + cp = new ColorPicker(); + cp.setPopupStyle(PopupStyle.POPUP_SIMPLE); + cp.setTextfieldVisibility(true); + row.addComponent(cp); + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java b/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java new file mode 100644 index 0000000000..cafdfe37e0 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/ComboBoxes.java @@ -0,0 +1,176 @@ +/* + * Copyright 2000-2013 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.data.Container; +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.server.ThemeResource; +import com.vaadin.server.UserError; +import com.vaadin.ui.Button; +import com.vaadin.ui.ComboBox; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.VerticalLayout; + +public class ComboBoxes extends VerticalLayout implements View { + public ComboBoxes() { + setMargin(true); + + Label h1 = new Label("Combo Boxes"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + Container generatedContainer = ValoThemeTest.generateContainer(200, + false); + ComboBox combo = new ComboBox("Normal"); + combo.setInputPrompt("You can type here"); + combo.setContainerDataSource(generatedContainer); + combo.setNullSelectionAllowed(false); + combo.select(generatedContainer.getItemIds().iterator().next()); + combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY); + combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY); + combo.setItemIcon(combo.getItemIds().iterator().next(), + new ThemeResource("../runo/icons/16/document.png")); + row.addComponent(combo); + + CssLayout group = new CssLayout(); + group.setCaption("Grouped with a Button"); + group.addStyleName("v-component-group"); + row.addComponent(group); + + combo = new ComboBox(); + combo.setInputPrompt("You can type here"); + combo.setContainerDataSource(generatedContainer); + combo.setNullSelectionAllowed(false); + combo.select(generatedContainer.getItemIds().iterator().next()); + combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY); + combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY); + combo.setWidth("240px"); + group.addComponent(combo); + Button today = new Button("Do It"); + group.addComponent(today); + + combo = new ComboBox("Explicit size"); + combo.setInputPrompt("You can type here"); + combo.addItem("Option One"); + combo.addItem("Option Two"); + combo.addItem("Option Three"); + combo.setWidth("260px"); + combo.setHeight("60px"); + row.addComponent(combo); + + combo = new ComboBox("No text input allowed"); + combo.setInputPrompt("You can click here"); + combo.addItem("Option One"); + combo.addItem("Option Two"); + combo.addItem("Option Three"); + combo.setTextInputAllowed(false); + combo.setNullSelectionAllowed(false); + combo.select("Option One"); + row.addComponent(combo); + + combo = new ComboBox("Error"); + combo.setInputPrompt("You can type here"); + combo.addItem("Option One"); + combo.addItem("Option Two"); + combo.addItem("Option Three"); + combo.setNullSelectionAllowed(false); + combo.select("Option One"); + combo.setComponentError(new UserError("Fix it, now!")); + row.addComponent(combo); + + combo = new ComboBox("Error, borderless"); + combo.setInputPrompt("You can type here"); + combo.addItem("Option One"); + combo.addItem("Option Two"); + combo.addItem("Option Three"); + combo.setNullSelectionAllowed(false); + combo.select("Option One"); + combo.setComponentError(new UserError("Fix it, now!")); + combo.addStyleName("borderless"); + row.addComponent(combo); + + combo = new ComboBox("Disabled"); + combo.setInputPrompt("You can't type here"); + combo.addItem("Option One"); + combo.addItem("Option Two"); + combo.addItem("Option Three"); + combo.setEnabled(false); + row.addComponent(combo); + + combo = new ComboBox("Custom color"); + combo.setInputPrompt("You can type here"); + combo.setContainerDataSource(generatedContainer); + combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY); + combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY); + combo.addStyleName("color1"); + row.addComponent(combo); + + combo = new ComboBox("Custom color"); + combo.setInputPrompt("You can type here"); + combo.setContainerDataSource(generatedContainer); + combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY); + combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY); + combo.addStyleName("color2"); + row.addComponent(combo); + + combo = new ComboBox("Custom color"); + combo.setInputPrompt("You can type here"); + combo.setContainerDataSource(generatedContainer); + combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY); + combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY); + combo.addStyleName("color3"); + row.addComponent(combo); + + combo = new ComboBox("Small"); + combo.setInputPrompt("You can type here"); + combo.setContainerDataSource(generatedContainer); + combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY); + combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY); + combo.addStyleName("small"); + row.addComponent(combo); + + combo = new ComboBox("Large"); + combo.setInputPrompt("You can type here"); + combo.setContainerDataSource(generatedContainer); + combo.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY); + combo.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY); + combo.addStyleName("large"); + row.addComponent(combo); + + combo = new ComboBox("Borderless"); + combo.setInputPrompt("You can type here"); + combo.addItem("Option One"); + combo.addItem("Option Two"); + combo.addItem("Option Three"); + combo.addStyleName("borderless"); + row.addComponent(combo); + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/CommonParts.java b/uitest/src/com/vaadin/tests/themes/valo/CommonParts.java new file mode 100644 index 0000000000..75d51ed2a6 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/CommonParts.java @@ -0,0 +1,714 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.data.Property.ValueChangeEvent; +import com.vaadin.data.Property.ValueChangeListener; +import com.vaadin.event.ShortcutAction.KeyCode; +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.server.AbstractErrorMessage; +import com.vaadin.server.ErrorMessage.ErrorLevel; +import com.vaadin.server.FontAwesome; +import com.vaadin.server.Page; +import com.vaadin.server.UserError; +import com.vaadin.shared.Position; +import com.vaadin.shared.ui.label.ContentMode; +import com.vaadin.ui.Alignment; +import com.vaadin.ui.Button; +import com.vaadin.ui.Button.ClickEvent; +import com.vaadin.ui.Button.ClickListener; +import com.vaadin.ui.CheckBox; +import com.vaadin.ui.Component; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.GridLayout; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.MenuBar; +import com.vaadin.ui.MenuBar.Command; +import com.vaadin.ui.MenuBar.MenuItem; +import com.vaadin.ui.Notification; +import com.vaadin.ui.Panel; +import com.vaadin.ui.TabSheet; +import com.vaadin.ui.TabSheet.SelectedTabChangeEvent; +import com.vaadin.ui.TabSheet.SelectedTabChangeListener; +import com.vaadin.ui.TextArea; +import com.vaadin.ui.TextField; +import com.vaadin.ui.VerticalLayout; +import com.vaadin.ui.Window; +import com.vaadin.ui.Window.CloseEvent; +import com.vaadin.ui.Window.CloseListener; + +public class CommonParts extends VerticalLayout implements View { + public CommonParts() { + setMargin(true); + + Label h1 = new Label("Common UI Elements"); + h1.addStyleName("h1"); + addComponent(h1); + + GridLayout row = new GridLayout(2, 3); + row.setWidth("100%"); + row.setSpacing(true); + addComponent(row); + + row.addComponent(loadingIndicators()); + row.addComponent(notifications(), 1, 0, 1, 2); + row.addComponent(windows()); + row.addComponent(tooltips()); + + } + + Panel loadingIndicators() { + Panel p = new Panel("Loading Indicator"); + VerticalLayout content = new VerticalLayout(); + p.setContent(content); + content.setSpacing(true); + content.setMargin(true); + content.addComponent(new Label( + "You can test the loading indicator by pressing the buttons.")); + + CssLayout group = new CssLayout(); + group.setCaption("Show the loading indicator for…"); + group.addStyleName("v-component-group"); + content.addComponent(group); + Button loading = new Button("0.8"); + loading.addClickListener(new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + try { + Thread.sleep(800); + } catch (InterruptedException e) { + } + } + }); + group.addComponent(loading); + + Button delay = new Button("3"); + delay.addClickListener(new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + try { + Thread.sleep(3000); + } catch (InterruptedException e) { + } + } + }); + group.addComponent(delay); + + Button wait = new Button("15"); + wait.addClickListener(new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + try { + Thread.sleep(15000); + } catch (InterruptedException e) { + } + } + }); + wait.addStyleName("last"); + group.addComponent(wait); + Label label = new Label(" seconds", ContentMode.HTML); + label.setSizeUndefined(); + group.addComponent(label); + + Label spinnerDesc = new Label( + "The theme also provides a mixin that you can use to include a spinner anywhere in your application. Below is a Label with a custom style name, for which the spinner mixin is added."); + spinnerDesc.addStyleName("small"); + spinnerDesc.setCaption("Spinner"); + content.addComponent(spinnerDesc); + + Label spinner = new Label(); + spinner.addStyleName("spinner"); + content.addComponent(spinner); + + return p; + } + + Panel notifications() { + Panel p = new Panel("Notifications"); + VerticalLayout content = new VerticalLayout() { + Notification notification = new Notification(""); + TextField title = new TextField("Title"); + TextArea description = new TextArea("Description"); + MenuBar style = new MenuBar(); + MenuBar type = new MenuBar(); + String typeString = ""; + String styleString = ""; + TextField delay = new TextField(); + { + setSpacing(true); + setMargin(true); + + title.setInputPrompt("Title for the notification"); + title.addValueChangeListener(new ValueChangeListener() { + @Override + public void valueChange(ValueChangeEvent event) { + if (title.getValue() == null + || title.getValue().length() == 0) { + notification.setCaption(null); + } else { + notification.setCaption(title.getValue()); + } + } + }); + title.setValue("Notification Title"); + title.setWidth("100%"); + addComponent(title); + + description.setInputPrompt("Description for the notification"); + description.addStyleName("small"); + description.addValueChangeListener(new ValueChangeListener() { + @Override + public void valueChange(ValueChangeEvent event) { + if (description.getValue() == null + || description.getValue().length() == 0) { + notification.setDescription(null); + } else { + notification.setDescription(description.getValue()); + } + } + }); + description + .setValue("A more informative message about what has happened. Nihil hic munitissimus habendi senatus locus, nihil horum? Inmensae subtilitatis, obscuris et malesuada fames. Hi omnes lingua, institutis, legibus inter se differunt."); + description.setWidth("100%"); + addComponent(description); + + Command typeCommand = new Command() { + @Override + public void menuSelected(MenuItem selectedItem) { + if (selectedItem.getText().equals("Humanized")) { + typeString = ""; + notification.setStyleName(styleString.trim()); + } else { + typeString = selectedItem.getText().toLowerCase(); + notification + .setStyleName((typeString + " " + styleString + .trim()).trim()); + } + for (MenuItem item : type.getItems()) { + item.setChecked(false); + } + selectedItem.setChecked(true); + } + }; + + type.setCaption("Type"); + MenuItem humanized = type.addItem("Humanized", typeCommand); + humanized.setCheckable(true); + humanized.setChecked(true); + type.addItem("Tray", typeCommand).setCheckable(true); + type.addItem("Warning", typeCommand).setCheckable(true); + type.addItem("Error", typeCommand).setCheckable(true); + type.addItem("System", typeCommand).setCheckable(true); + addComponent(type); + type.addStyleName("small"); + + Command styleCommand = new Command() { + @Override + public void menuSelected(MenuItem selectedItem) { + styleString = ""; + for (MenuItem item : style.getItems()) { + if (item.isChecked()) { + styleString += " " + + item.getText().toLowerCase(); + } + } + if (styleString.trim().length() > 0) { + notification + .setStyleName((typeString + " " + styleString + .trim()).trim()); + } else if (typeString.length() > 0) { + notification.setStyleName(typeString.trim()); + } else { + notification.setStyleName(null); + } + } + }; + + style.setCaption("Additional style"); + style.addItem("Success", styleCommand).setCheckable(true); + style.addItem("Failure", styleCommand).setCheckable(true); + style.addItem("Bar", styleCommand).setCheckable(true); + style.addItem("Small", styleCommand).setCheckable(true); + style.addItem("Closable", styleCommand).setCheckable(true); + addComponent(style); + style.addStyleName("small"); + + CssLayout group = new CssLayout(); + group.setCaption("Fade delay"); + group.addStyleName("v-component-group"); + addComponent(group); + + delay.setInputPrompt("Infinite"); + delay.addStyleName("align-right"); + delay.addStyleName("small"); + delay.setWidth("7em"); + delay.addValueChangeListener(new ValueChangeListener() { + @Override + public void valueChange(ValueChangeEvent event) { + try { + notification.setDelayMsec(Integer.parseInt(delay + .getValue())); + } catch (Exception e) { + notification.setDelayMsec(-1); + delay.setValue(""); + } + + } + }); + delay.setValue("1000"); + group.addComponent(delay); + + Button clear = new Button(null, new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + delay.setValue(""); + } + }); + clear.setIcon(FontAwesome.TIMES_CIRCLE); + clear.addStyleName("last"); + clear.addStyleName("small"); + clear.addStyleName("icon-only"); + group.addComponent(clear); + group.addComponent(new Label(" msec", ContentMode.HTML)); + + GridLayout grid = new GridLayout(3, 3); + grid.setCaption("Show in position"); + addComponent(grid); + grid.setSpacing(true); + + Button pos = new Button("", new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + notification.setPosition(Position.TOP_LEFT); + notification.show(Page.getCurrent()); + } + }); + pos.addStyleName("small"); + grid.addComponent(pos); + + pos = new Button("", new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + notification.setPosition(Position.TOP_CENTER); + notification.show(Page.getCurrent()); + } + }); + pos.addStyleName("small"); + grid.addComponent(pos); + + pos = new Button("", new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + notification.setPosition(Position.TOP_RIGHT); + notification.show(Page.getCurrent()); + } + }); + pos.addStyleName("small"); + grid.addComponent(pos); + + pos = new Button("", new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + notification.setPosition(Position.MIDDLE_LEFT); + notification.show(Page.getCurrent()); + } + }); + pos.addStyleName("small"); + grid.addComponent(pos); + + pos = new Button("", new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + notification.setPosition(Position.MIDDLE_CENTER); + notification.show(Page.getCurrent()); + } + }); + pos.addStyleName("small"); + grid.addComponent(pos); + + pos = new Button("", new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + notification.setPosition(Position.MIDDLE_RIGHT); + notification.show(Page.getCurrent()); + } + }); + pos.addStyleName("small"); + grid.addComponent(pos); + + pos = new Button("", new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + notification.setPosition(Position.BOTTOM_LEFT); + notification.show(Page.getCurrent()); + } + }); + pos.addStyleName("small"); + grid.addComponent(pos); + + pos = new Button("", new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + notification.setPosition(Position.BOTTOM_CENTER); + notification.show(Page.getCurrent()); + } + }); + pos.addStyleName("small"); + grid.addComponent(pos); + + pos = new Button("", new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + notification.setPosition(Position.BOTTOM_RIGHT); + notification.show(Page.getCurrent()); + } + }); + pos.addStyleName("small"); + grid.addComponent(pos); + + } + }; + p.setContent(content); + + return p; + } + + Panel tooltips() { + Panel p = new Panel("Tooltips"); + HorizontalLayout content = new HorizontalLayout() { + { + setSpacing(true); + setMargin(true); + addStyleName("wrapping"); + + addComponent(new Label( + "Try out different tooltips/descriptions by hovering over the labels.")); + + Label label = new Label("Simple"); + label.addStyleName("bold"); + label.setDescription("Simple tooltip message"); + addComponent(label); + + label = new Label("Long"); + label.addStyleName("bold"); + label.setDescription("Long tooltip message. Inmensae subtilitatis, obscuris et malesuada fames. Salutantibus vitae elit libero, a pharetra augue."); + addComponent(label); + + label = new Label("HTML tooltip"); + label.addStyleName("bold"); + label.setDescription("<div><h1>Ut enim ad minim veniam, quis nostrud exercitation</h1><p><span>Morbi fringilla convallis sapien, id pulvinar odio volutpat.</span> <span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</span> <span>Donec sed odio operae, eu vulputate felis rhoncus.</span> <span>At nos hinc posthac, sitientis piros Afros.</span> <span>Tu quoque, Brute, fili mi, nihil timor populi, nihil!</span></p><p><span>Gallia est omnis divisa in partes tres, quarum.</span> <span>Praeterea iter est quasdam res quas ex communi.</span> <span>Cum ceteris in veneratione tui montes, nascetur mus.</span> <span>Quam temere in vitiis, legem sancimus haerentia.</span> <span>Idque Caesaris facere voluntate liceret: sese habere.</span></p></div>"); + addComponent(label); + + label = new Label("With an error message"); + label.addStyleName("bold"); + label.setDescription("Simple tooltip message"); + label.setComponentError(new UserError( + "Something terrible has happened")); + addComponent(label); + + label = new Label("With a long error message"); + label.addStyleName("bold"); + label.setDescription("Simple tooltip message"); + label.setComponentError(new UserError( + "<h2>Contra legem facit qui id facit quod lex prohibet <span>Tityre, tu patulae recubans sub tegmine fagi dolor.</span> <span>Tityre, tu patulae recubans sub tegmine fagi dolor.</span> <span>Prima luce, cum quibus mons aliud consensu ab eo.</span> <span>Quid securi etiam tamquam eu fugiat nulla pariatur.</span> <span>Fabio vel iudice vincam, sunt in culpa qui officia.</span> <span>Nihil hic munitissimus habendi senatus locus, nihil horum?</span></p><p><span>Plura mihi bona sunt, inclinet, amari petere vellent.</span> <span>Integer legentibus erat a ante historiarum dapibus.</span> <span>Quam diu etiam furor iste tuus nos eludet?</span> <span>Nec dubitamus multa iter quae et nos invenerat.</span> <span>Quisque ut dolor gravida, placerat libero vel, euismod.</span> <span>Quae vero auctorem tractata ab fiducia dicuntur.</span></h2>", + AbstractErrorMessage.ContentMode.HTML, + ErrorLevel.CRITICAL)); + addComponent(label); + + label = new Label("Error message only"); + label.addStyleName("bold"); + label.setComponentError(new UserError( + "Something terrible has happened")); + addComponent(label); + } + }; + p.setContent(content); + return p; + + } + + Panel windows() { + Panel p = new Panel("Dialogs"); + VerticalLayout content = new VerticalLayout() { + final Window win = new Window("Window Caption"); + String prevHeight = "300px"; + boolean footerVisible = true; + boolean autoHeight = false; + boolean tabsVisible = false; + boolean toolbarVisible = false; + boolean footerToolbar = false; + boolean toolbarLayout = false; + String toolbarStyle = null; + + VerticalLayout windowContent() { + VerticalLayout root = new VerticalLayout(); + + if (toolbarVisible) { + MenuBar menuBar = MenuBars.getToolBar(); + menuBar.setSizeUndefined(); + menuBar.setStyleName(toolbarStyle); + Component toolbar = menuBar; + if (toolbarLayout) { + menuBar.setWidth(null); + HorizontalLayout toolbarLayout = new HorizontalLayout(); + toolbarLayout.setWidth("100%"); + toolbarLayout.setSpacing(true); + Label label = new Label("Tools"); + label.setSizeUndefined(); + toolbarLayout.addComponents(label, menuBar); + toolbarLayout.setExpandRatio(menuBar, 1); + toolbarLayout.setComponentAlignment(menuBar, + Alignment.TOP_RIGHT); + toolbar = toolbarLayout; + } + toolbar.addStyleName("v-window-top-toolbar"); + root.addComponent(toolbar); + } + + Component content = null; + + if (tabsVisible) { + TabSheet tabs = new TabSheet(); + tabs.setSizeFull(); + VerticalLayout l = new VerticalLayout(); + l.addComponent(new Label( + "<h2>Subtitle</h2><p>Normal type for plain text. Etiam at risus et justo dignissim congue. Phasellus laoreet lorem vel dolor tempus vehicula.</p><p>Quisque ut dolor gravida, placerat libero vel, euismod. Etiam habebis sem dicantur magna mollis euismod. Nihil hic munitissimus habendi senatus locus, nihil horum? Curabitur est gravida et libero vitae dictum. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.</p>", + ContentMode.HTML)); + l.setMargin(true); + tabs.addTab(l, "Selected"); + tabs.addTab(new Label(" ", ContentMode.HTML), + "Another"); + tabs.addTab(new Label(" ", ContentMode.HTML), + "One more"); + tabs.addStyleName("padded-tabbar"); + tabs.addSelectedTabChangeListener(new SelectedTabChangeListener() { + @Override + public void selectedTabChange( + SelectedTabChangeEvent event) { + try { + Thread.sleep(600); + } catch (InterruptedException e) { + e.printStackTrace(); + } + } + }); + content = tabs; + } else if (!autoHeight) { + Panel p = new Panel(); + p.setSizeFull(); + p.addStyleName("borderless"); + if (!toolbarVisible || !toolbarLayout) { + p.addStyleName("scroll-divider"); + } + VerticalLayout l = new VerticalLayout(); + l.addComponent(new Label( + "<h2>Subtitle</h2><p>Normal type for plain text. Etiam at risus et justo dignissim congue. Phasellus laoreet lorem vel dolor tempus vehicula.</p><p>Quisque ut dolor gravida, placerat libero vel, euismod. Etiam habebis sem dicantur magna mollis euismod. Nihil hic munitissimus habendi senatus locus, nihil horum? Curabitur est gravida et libero vitae dictum. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.</p>", + ContentMode.HTML)); + l.setMargin(true); + p.setContent(l); + content = p; + } else { + content = new Label( + "<h2>Subtitle</h2><p>Normal type for plain text. Etiam at risus et justo dignissim congue. Phasellus laoreet lorem vel dolor tempus vehicula.</p><p>Quisque ut dolor gravida, placerat libero vel, euismod. Etiam habebis sem dicantur magna mollis euismod. Nihil hic munitissimus habendi senatus locus, nihil horum? Curabitur est gravida et libero vitae dictum. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.</p>", + ContentMode.HTML); + root.setMargin(true); + } + + root.addComponent(content); + + if (footerVisible) { + HorizontalLayout footer = new HorizontalLayout(); + footer.setWidth("100%"); + footer.setSpacing(true); + footer.addStyleName("v-window-bottom-toolbar"); + + Label footerText = new Label("Footer text"); + footerText.setSizeUndefined(); + + Button ok = new Button("OK"); + ok.addStyleName("primary"); + + Button cancel = new Button("Cancel"); + + footer.addComponents(footerText, ok, cancel); + footer.setExpandRatio(footerText, 1); + + if (footerToolbar) { + MenuBar menuBar = MenuBars.getToolBar(); + menuBar.setStyleName(toolbarStyle); + menuBar.setWidth(null); + footer.removeAllComponents(); + footer.addComponent(menuBar); + } + + root.addComponent(footer); + } + + if (!autoHeight) { + root.setSizeFull(); + root.setExpandRatio(content, 1); + } + + return root; + } + + { + setSpacing(true); + setMargin(true); + win.setWidth("380px"); + win.setHeight(prevHeight); + win.setClosable(false); + win.setResizable(false); + win.setContent(windowContent()); + win.setCloseShortcut(KeyCode.ESCAPE, null); + + Command optionsCommand = new Command() { + @Override + public void menuSelected(MenuItem selectedItem) { + if (selectedItem.getText().equals("Footer")) { + footerVisible = selectedItem.isChecked(); + } + if (selectedItem.getText().equals("Auto Height")) { + autoHeight = selectedItem.isChecked(); + if (!autoHeight) { + win.setHeight(prevHeight); + } else { + prevHeight = win.getHeight() + + win.getHeightUnits().toString(); + win.setHeight(null); + } + } + if (selectedItem.getText().equals("Tabs")) { + tabsVisible = selectedItem.isChecked(); + } + + if (selectedItem.getText().equals("Top Toolbar")) { + toolbarVisible = selectedItem.isChecked(); + } + + if (selectedItem.getText().equals("Footer Toolbar")) { + footerToolbar = selectedItem.isChecked(); + } + + if (selectedItem.getText().equals("Top Toolbar layout")) { + toolbarLayout = selectedItem.isChecked(); + } + + if (selectedItem.getText() + .equals("Borderless Toolbars")) { + toolbarStyle = selectedItem.isChecked() ? "borderless" + : null; + } + + win.setContent(windowContent()); + } + }; + + MenuBar options = new MenuBar(); + options.setCaption("Content"); + options.addItem("Auto Height", optionsCommand).setCheckable( + true); + options.addItem("Tabs", optionsCommand).setCheckable(true); + MenuItem option = options.addItem("Footer", optionsCommand); + option.setCheckable(true); + option.setChecked(true); + options.addStyleName("small"); + addComponent(options); + + options = new MenuBar(); + options.setCaption("Toolbars"); + options.addItem("Footer Toolbar", optionsCommand).setCheckable( + true); + options.addItem("Top Toolbar", optionsCommand).setCheckable( + true); + options.addItem("Top Toolbar layout", optionsCommand) + .setCheckable(true); + options.addItem("Borderless Toolbars", optionsCommand) + .setCheckable(true); + options.addStyleName("small"); + addComponent(options); + + Command optionsCommand2 = new Command() { + @Override + public void menuSelected(MenuItem selectedItem) { + if (selectedItem.getText().equals("Caption")) { + win.setCaption(selectedItem.isChecked() ? "Window Caption" + : null); + } else if (selectedItem.getText().equals("Closable")) { + win.setClosable(selectedItem.isChecked()); + } else if (selectedItem.getText().equals("Resizable")) { + win.setResizable(selectedItem.isChecked()); + } else if (selectedItem.getText().equals("Modal")) { + win.setModal(selectedItem.isChecked()); + } + } + }; + + options = new MenuBar(); + options.setCaption("Options"); + MenuItem caption = options.addItem("Caption", optionsCommand2); + caption.setCheckable(true); + caption.setChecked(true); + options.addItem("Closable", optionsCommand2).setCheckable(true); + options.addItem("Resizable", optionsCommand2) + .setCheckable(true); + options.addItem("Modal", optionsCommand2).setCheckable(true); + options.addStyleName("small"); + addComponent(options); + + final Button show = new Button("Open Window", + new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + getUI().addWindow(win); + win.center(); + win.focus(); + event.getButton().setEnabled(false); + } + }); + show.addStyleName("primary"); + addComponent(show); + + final CheckBox hidden = new CheckBox("Hidden"); + hidden.addValueChangeListener(new ValueChangeListener() { + @Override + public void valueChange(ValueChangeEvent event) { + win.setVisible(!hidden.getValue()); + } + }); + addComponent(hidden); + + win.addCloseListener(new CloseListener() { + @Override + public void windowClose(CloseEvent e) { + show.setEnabled(true); + } + }); + } + }; + p.setContent(content); + return p; + + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/DateFields.java b/uitest/src/com/vaadin/tests/themes/valo/DateFields.java new file mode 100644 index 0000000000..ae520e07c2 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/DateFields.java @@ -0,0 +1,190 @@ +/* + * Copyright 2000-2013 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import java.util.Date; +import java.util.Locale; + +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.server.UserError; +import com.vaadin.shared.ui.datefield.Resolution; +import com.vaadin.ui.Button; +import com.vaadin.ui.Button.ClickEvent; +import com.vaadin.ui.Button.ClickListener; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.DateField; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.InlineDateField; +import com.vaadin.ui.Label; +import com.vaadin.ui.VerticalLayout; + +public class DateFields extends VerticalLayout implements View { + public DateFields() { + setMargin(true); + + Label h1 = new Label("Date Fields"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + DateField date = new DateField("Default resolution"); + date.setValue(new Date()); + row.addComponent(date); + + date = new DateField("Error"); + date.setValue(new Date()); + date.setComponentError(new UserError("Fix it, now!")); + row.addComponent(date); + + date = new DateField("Error, borderless"); + date.setValue(new Date()); + date.setComponentError(new UserError("Fix it, now!")); + date.addStyleName("borderless"); + row.addComponent(date); + + CssLayout group = new CssLayout(); + group.setCaption("Grouped with a Button"); + group.addStyleName("v-component-group"); + row.addComponent(group); + + final DateField date2 = new DateField(); + group.addComponent(date2); + + Button today = new Button("Today", new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + date2.setValue(new Date()); + } + }); + group.addComponent(today); + + date = new DateField("Default resolution, explicit size"); + date.setValue(new Date()); + row.addComponent(date); + date.setWidth("260px"); + date.setHeight("60px"); + + date = new DateField("Second resolution"); + date.setValue(new Date()); + date.setResolution(Resolution.SECOND); + row.addComponent(date); + + date = new DateField("Minute resolution"); + date.setValue(new Date()); + date.setResolution(Resolution.MINUTE); + row.addComponent(date); + + date = new DateField("Hour resolution"); + date.setValue(new Date()); + date.setResolution(Resolution.HOUR); + row.addComponent(date); + + date = new DateField("Disabled"); + date.setValue(new Date()); + date.setResolution(Resolution.HOUR); + date.setEnabled(false); + row.addComponent(date); + + date = new DateField("Day resolution"); + date.setValue(new Date()); + date.setResolution(Resolution.DAY); + row.addComponent(date); + + date = new DateField("Month resolution"); + date.setValue(new Date()); + date.setResolution(Resolution.MONTH); + row.addComponent(date); + + date = new DateField("Year resolution"); + date.setValue(new Date()); + date.setResolution(Resolution.YEAR); + row.addComponent(date); + + date = new DateField("Custom color"); + date.setValue(new Date()); + date.setResolution(Resolution.DAY); + date.addStyleName("color1"); + row.addComponent(date); + + date = new DateField("Custom color"); + date.setValue(new Date()); + date.setResolution(Resolution.DAY); + date.addStyleName("color2"); + row.addComponent(date); + + date = new DateField("Custom color"); + date.setValue(new Date()); + date.setResolution(Resolution.DAY); + date.addStyleName("color3"); + row.addComponent(date); + + date = new DateField("Small"); + date.setValue(new Date()); + date.setResolution(Resolution.DAY); + date.addStyleName("small"); + row.addComponent(date); + + date = new DateField("Large"); + date.setValue(new Date()); + date.setResolution(Resolution.DAY); + date.addStyleName("large"); + row.addComponent(date); + + date = new DateField("Borderless"); + date.setValue(new Date()); + date.setResolution(Resolution.DAY); + date.addStyleName("borderless"); + row.addComponent(date); + + date = new DateField("Week numbers"); + date.setValue(new Date()); + date.setResolution(Resolution.DAY); + date.setLocale(new Locale("fi", "fi")); + date.setShowISOWeekNumbers(true); + row.addComponent(date); + + date = new DateField("US locale"); + date.setValue(new Date()); + date.setResolution(Resolution.SECOND); + date.setLocale(new Locale("en", "US")); + row.addComponent(date); + + date = new DateField("Custom format"); + date.setValue(new Date()); + date.setDateFormat("E dd/MM/yyyy"); + row.addComponent(date); + + date = new InlineDateField("Date picker"); + row.addComponent(date); + + date = new InlineDateField("Date picker with week numbers"); + date.setLocale(new Locale("fi", "fi")); + date.setShowISOWeekNumbers(true); + row.addComponent(date); + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/Dragging.java b/uitest/src/com/vaadin/tests/themes/valo/Dragging.java new file mode 100644 index 0000000000..27bdea7d8a --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/Dragging.java @@ -0,0 +1,273 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import java.util.ArrayList; +import java.util.Iterator; +import java.util.List; + +import com.vaadin.event.Transferable; +import com.vaadin.event.dd.DragAndDropEvent; +import com.vaadin.event.dd.DropHandler; +import com.vaadin.event.dd.DropTarget; +import com.vaadin.event.dd.TargetDetails; +import com.vaadin.event.dd.acceptcriteria.AcceptCriterion; +import com.vaadin.event.dd.acceptcriteria.Not; +import com.vaadin.event.dd.acceptcriteria.SourceIsTarget; +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.server.ThemeResource; +import com.vaadin.shared.ui.dd.HorizontalDropLocation; +import com.vaadin.ui.AbstractOrderedLayout; +import com.vaadin.ui.Alignment; +import com.vaadin.ui.Button; +import com.vaadin.ui.Button.ClickEvent; +import com.vaadin.ui.Component; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.CustomComponent; +import com.vaadin.ui.DragAndDropWrapper; +import com.vaadin.ui.Embedded; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.MenuBar; +import com.vaadin.ui.MenuBar.MenuItem; +import com.vaadin.ui.Notification; +import com.vaadin.ui.VerticalLayout; + +/** + * + * @since + * @author Vaadin Ltd + */ +public class Dragging extends VerticalLayout implements View { + + SortableLayout sample; + + public Dragging() { + setMargin(true); + setSpacing(true); + + Label h1 = new Label("Dragging Components"); + h1.addStyleName("h1"); + addComponent(h1); + + MenuBar options = new MenuBar(); + options.setCaption("Drop Hints"); + addComponent(options); + + // Use these styles to hide irrelevant drag hints + // Can be used either on a parent or directly on the DnDWrapper + MenuItem opt = options.addItem("Vertical", new MenuBar.Command() { + @Override + public void menuSelected(MenuItem selectedItem) { + if (selectedItem.isChecked()) { + sample.removeStyleName("no-vertical-drag-hints"); + } else { + sample.addStyleName("no-vertical-drag-hints"); + } + } + }); + opt.setCheckable(true); + opt.setChecked(true); + + opt = options.addItem("Horizontal", new MenuBar.Command() { + @Override + public void menuSelected(MenuItem selectedItem) { + if (selectedItem.isChecked()) { + sample.removeStyleName("no-horizontal-drag-hints"); + } else { + sample.addStyleName("no-horizontal-drag-hints"); + } + } + }); + opt.setCheckable(true); + opt.setChecked(true); + + opt = options.addItem("Box", new MenuBar.Command() { + @Override + public void menuSelected(MenuItem selectedItem) { + if (selectedItem.isChecked()) { + sample.removeStyleName("no-box-drag-hints"); + } else { + sample.addStyleName("no-box-drag-hints"); + } + } + }); + opt.setCheckable(true); + opt.setChecked(true); + + sample = new SortableLayout(); + sample.setSizeUndefined(); + sample.setHeight("100px"); + + for (final Component component : createComponents()) { + sample.addComponent(component); + } + + addComponent(sample); + + } + + private List<Component> createComponents() { + final List<Component> components = new ArrayList<Component>(); + + final Label label = new Label( + "This is a long text block that will wrap."); + label.setWidth("120px"); + components.add(label); + + final Embedded image = new Embedded("", new ThemeResource( + "../runo/icons/64/document.png")); + components.add(image); + + final CssLayout documentLayout = new CssLayout(); + documentLayout.setWidth("19px"); + for (int i = 0; i < 5; ++i) { + final Embedded e = new Embedded(null, new ThemeResource( + "../runo/icons/16/document.png")); + e.setHeight("16px"); + e.setWidth("16px"); + documentLayout.addComponent(e); + } + components.add(documentLayout); + + final VerticalLayout buttonLayout = new VerticalLayout(); + final Button button = new Button("Button"); + button.addClickListener(new Button.ClickListener() { + @Override + public void buttonClick(final ClickEvent event) { + Notification.show("Button clicked"); + } + }); + buttonLayout.addComponent(button); + buttonLayout.setComponentAlignment(button, Alignment.MIDDLE_CENTER); + components.add(buttonLayout); + + return components; + } + + private static class ReorderLayoutDropHandler implements DropHandler { + + private final AbstractOrderedLayout layout; + + public ReorderLayoutDropHandler(final AbstractOrderedLayout layout) { + this.layout = layout; + } + + @Override + public AcceptCriterion getAcceptCriterion() { + return new Not(SourceIsTarget.get()); + } + + @Override + public void drop(final DragAndDropEvent dropEvent) { + final Transferable transferable = dropEvent.getTransferable(); + final Component sourceComponent = transferable.getSourceComponent(); + if (sourceComponent instanceof WrappedComponent) { + final TargetDetails dropTargetData = dropEvent + .getTargetDetails(); + final DropTarget target = dropTargetData.getTarget(); + + // find the location where to move the dragged component + boolean sourceWasAfterTarget = true; + int index = 0; + final Iterator<Component> componentIterator = layout + .getComponentIterator(); + Component next = null; + while (next != target && componentIterator.hasNext()) { + next = componentIterator.next(); + if (next != sourceComponent) { + index++; + } else { + sourceWasAfterTarget = false; + } + } + if (next == null || next != target) { + // component not found - if dragging from another layout + return; + } + + // drop on top of target? + if (dropTargetData.getData("horizontalLocation").equals( + HorizontalDropLocation.CENTER.toString())) { + if (sourceWasAfterTarget) { + index--; + } + } + + // drop before the target? + else if (dropTargetData.getData("horizontalLocation").equals( + HorizontalDropLocation.LEFT.toString())) { + index--; + if (index < 0) { + index = 0; + } + } + + // move component within the layout + layout.removeComponent(sourceComponent); + layout.addComponent(sourceComponent, index); + } + } + } + + private static class SortableLayout extends CustomComponent { + private final AbstractOrderedLayout layout; + private final DropHandler dropHandler; + + public SortableLayout() { + layout = new HorizontalLayout(); + layout.setMargin(true); + dropHandler = new ReorderLayoutDropHandler(layout); + + // final DragAndDropWrapper pane = new DragAndDropWrapper(layout); + setCompositionRoot(layout); + } + + public void addComponent(final Component component) { + final WrappedComponent wrapper = new WrappedComponent(component, + dropHandler); + wrapper.setSizeUndefined(); + component.setHeight("100%"); + wrapper.setHeight("100%"); + layout.addComponent(wrapper); + } + } + + private static class WrappedComponent extends DragAndDropWrapper { + + private final DropHandler dropHandler; + + public WrappedComponent(final Component content, + final DropHandler dropHandler) { + super(content); + this.dropHandler = dropHandler; + setDragStartMode(DragStartMode.WRAPPER); + } + + @Override + public DropHandler getDropHandler() { + return dropHandler; + } + + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/Forms.java b/uitest/src/com/vaadin/tests/themes/valo/Forms.java new file mode 100644 index 0000000000..9451b5c5d3 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/Forms.java @@ -0,0 +1,188 @@ +/* + * Copyright 2000-2013 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import java.util.Date; + +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.server.UserError; +import com.vaadin.shared.ui.MarginInfo; +import com.vaadin.ui.Alignment; +import com.vaadin.ui.Button; +import com.vaadin.ui.Button.ClickEvent; +import com.vaadin.ui.Button.ClickListener; +import com.vaadin.ui.CheckBox; +import com.vaadin.ui.ComboBox; +import com.vaadin.ui.DateField; +import com.vaadin.ui.FormLayout; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.OptionGroup; +import com.vaadin.ui.RichTextArea; +import com.vaadin.ui.TextArea; +import com.vaadin.ui.TextField; +import com.vaadin.ui.VerticalLayout; + +/** + * + * @since + * @author Vaadin Ltd + */ +public class Forms extends VerticalLayout implements View { + public Forms() { + setSpacing(true); + setMargin(true); + + Label title = new Label("Form"); + title.addStyleName("h1"); + addComponent(title); + + final FormLayout form = new FormLayout(); + form.setMargin(false); + form.setWidth("800px"); + form.addStyleName("light"); + addComponent(form); + + Label section = new Label("Personal Info"); + section.addStyleName("h2"); + form.addComponent(section); + + TextField name = new TextField("Name"); + name.setValue(ValoThemeTest.nextString(true) + " " + + ValoThemeTest.nextString(true)); + name.setWidth("50%"); + form.addComponent(name); + + DateField birthday = new DateField("Birthday"); + birthday.setValue(new Date(80, 0, 31)); + form.addComponent(birthday); + + TextField username = new TextField("Username"); + username.setValue(ValoThemeTest.nextString(false) + + ValoThemeTest.nextString(false)); + username.setRequired(true); + form.addComponent(username); + + OptionGroup sex = new OptionGroup("Sex"); + sex.addItem("Female"); + sex.addItem("Male"); + sex.select("Male"); + sex.addStyleName("horizontal"); + form.addComponent(sex); + + section = new Label("Contact Info"); + section.addStyleName("h3"); + form.addComponent(section); + + TextField email = new TextField("Email"); + email.setValue(ValoThemeTest.nextString(false) + "@" + + ValoThemeTest.nextString(false) + ".com"); + email.setWidth("50%"); + email.setRequired(true); + form.addComponent(email); + + TextField location = new TextField("Location"); + location.setValue(ValoThemeTest.nextString(true) + ", " + + ValoThemeTest.nextString(true)); + location.setWidth("50%"); + location.setComponentError(new UserError("This address doesn't exist")); + form.addComponent(location); + + TextField phone = new TextField("Phone"); + phone.setWidth("50%"); + form.addComponent(phone); + + HorizontalLayout wrap = new HorizontalLayout(); + wrap.setSpacing(true); + wrap.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT); + wrap.setCaption("Newsletter"); + CheckBox newsletter = new CheckBox("Subscribe to newsletter", true); + wrap.addComponent(newsletter); + + ComboBox period = new ComboBox(); + period.setTextInputAllowed(false); + period.addItem("Daily"); + period.addItem("Weekly"); + period.addItem("Montly"); + period.setNullSelectionAllowed(false); + period.select("Weekly"); + period.addStyleName("small"); + period.setWidth("10em"); + wrap.addComponent(period); + form.addComponent(wrap); + + section = new Label("Additional Info"); + section.addStyleName("h4"); + form.addComponent(section); + + TextField website = new TextField("Website"); + website.setInputPrompt("http://"); + website.setWidth("100%"); + form.addComponent(website); + + TextArea shortbio = new TextArea("Short Bio"); + shortbio.setValue("Quis aute iure reprehenderit in voluptate velit esse. Cras mattis iudicium purus sit amet fermentum."); + shortbio.setWidth("100%"); + shortbio.setRows(2); + form.addComponent(shortbio); + + final RichTextArea bio = new RichTextArea("Bio"); + bio.setWidth("100%"); + bio.setValue("<div><p><span>Integer legentibus erat a ante historiarum dapibus.</span> <span>Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</span> <span>A communi observantia non est recedendum.</span> <span>Morbi fringilla convallis sapien, id pulvinar odio volutpat.</span> <span>Ab illo tempore, ab est sed immemorabili.</span> <span>Quam temere in vitiis, legem sancimus haerentia.</span></p><p><span>Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.</span> <span>Quam diu etiam furor iste tuus nos eludet?</span> <span>Cum sociis natoque penatibus et magnis dis parturient.</span> <span>Quam diu etiam furor iste tuus nos eludet?</span> <span>Tityre, tu patulae recubans sub tegmine fagi dolor.</span></p><p><span>Curabitur blandit tempus ardua ridiculus sed magna.</span> <span>Phasellus laoreet lorem vel dolor tempus vehicula.</span> <span>Etiam habebis sem dicantur magna mollis euismod.</span> <span>Hi omnes lingua, institutis, legibus inter se differunt.</span></p></div>"); + form.addComponent(bio); + + form.setReadOnly(true); + bio.setReadOnly(true); + + Button edit = new Button("Edit", new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + boolean readOnly = form.isReadOnly(); + if (readOnly) { + bio.setReadOnly(false); + form.setReadOnly(false); + form.removeStyleName("light"); + event.getButton().setCaption("Save"); + event.getButton().addStyleName("primary"); + } else { + bio.setReadOnly(true); + form.setReadOnly(true); + form.addStyleName("light"); + event.getButton().setCaption("Edit"); + event.getButton().removeStyleName("primary"); + } + } + }); + + HorizontalLayout footer = new HorizontalLayout(); + footer.setMargin(new MarginInfo(true, false, true, false)); + footer.setSpacing(true); + footer.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT); + form.addComponent(footer); + footer.addComponent(edit); + + Label lastModified = new Label("Last modified by you a minute ago"); + lastModified.addStyleName("light"); + footer.addComponent(lastModified); + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/Labels.java b/uitest/src/com/vaadin/tests/themes/valo/Labels.java new file mode 100644 index 0000000000..08378ad9e6 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/Labels.java @@ -0,0 +1,112 @@ +/* + * Copyright 2000-2013 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.shared.ui.MarginInfo; +import com.vaadin.shared.ui.label.ContentMode; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.Panel; +import com.vaadin.ui.VerticalLayout; + +/** + * + * @since + * @author Vaadin Ltd + */ +public class Labels extends VerticalLayout implements View { + public Labels() { + setMargin(true); + + Label h1 = new Label("Labels"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout split = new HorizontalLayout(); + split.setWidth("100%"); + addComponent(split); + + VerticalLayout left = new VerticalLayout(); + left.setMargin(new MarginInfo(false, true, false, false)); + split.addComponent(left); + + Label large = new Label( + "Large type for introductory text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu."); + large.addStyleName("large"); + left.addComponent(large); + + Label h2 = new Label("Subtitle"); + h2.addStyleName("h2"); + left.addComponent(h2); + + Label normal = new Label( + "Normal type for plain text, with a <a href=\"https://vaadin.com\">regular link</a>. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu.", + ContentMode.HTML); + left.addComponent(normal); + + Label h3 = new Label("Small Title"); + h3.addStyleName("h3"); + left.addComponent(h3); + + Label small = new Label( + "Small type for additional text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu."); + small.addStyleName("small"); + left.addComponent(small); + + Label h4 = new Label("Section Title"); + h4.addStyleName("h4"); + left.addComponent(h4); + + normal = new Label( + "Normal type for plain text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu."); + left.addComponent(normal); + + Panel p = new Panel("Additional Label Styles"); + split.addComponent(p); + + VerticalLayout right = new VerticalLayout(); + right.setSpacing(true); + right.setMargin(true); + p.setContent(right); + + Label label = new Label( + "Bold type for prominent text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu."); + label.addStyleName("bold"); + right.addComponent(label); + + label = new Label( + "Light type for subtle text. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu."); + label.addStyleName("light"); + right.addComponent(label); + + label = new Label("A label for success"); + label.addStyleName("success"); + right.addComponent(label); + + label = new Label("A label for failure"); + label.addStyleName("failure"); + right.addComponent(label); + + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java b/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java new file mode 100644 index 0000000000..f15f43254a --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/MenuBars.java @@ -0,0 +1,187 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.server.FontAwesome; +import com.vaadin.ui.Label; +import com.vaadin.ui.MenuBar; +import com.vaadin.ui.MenuBar.Command; +import com.vaadin.ui.MenuBar.MenuItem; +import com.vaadin.ui.Notification; +import com.vaadin.ui.VerticalLayout; + +public class MenuBars extends VerticalLayout implements View { + public MenuBars() { + setMargin(true); + setSpacing(true); + + Label h1 = new Label("Menu Bars"); + h1.addStyleName("h1"); + addComponent(h1); + + MenuBar menuBar = getMenuBar(); + menuBar.setCaption("Normal style"); + addComponent(menuBar); + + menuBar = getMenuBar(); + menuBar.setCaption("Small style"); + menuBar.addStyleName("small"); + addComponent(menuBar); + + menuBar = getMenuBar(); + menuBar.setCaption("Borderless style"); + menuBar.addStyleName("borderless"); + addComponent(menuBar); + + menuBar = getMenuBar(); + menuBar.setCaption("Small borderless style"); + menuBar.addStyleName("borderless"); + menuBar.addStyleName("small"); + addComponent(menuBar); + } + + static MenuBar getMenuBar() { + Command click = new Command() { + @Override + public void menuSelected(MenuItem selectedItem) { + Notification.show("Clicked " + selectedItem.getText()); + } + }; + + MenuBar menubar = new MenuBar(); + menubar.setWidth("100%"); + final MenuBar.MenuItem file = menubar.addItem("File", null); + final MenuBar.MenuItem newItem = file.addItem("New", null); + file.addItem("Open file...", click); + file.addSeparator(); + + newItem.addItem("File", click); + newItem.addItem("Folder", click); + newItem.addItem("Project...", click); + + file.addItem("Close", click); + file.addItem("Close All", click); + file.addSeparator(); + + file.addItem("Save", click); + file.addItem("Save As...", click); + file.addItem("Save All", click); + + final MenuBar.MenuItem edit = menubar.addItem("Edit", null); + edit.addItem("Undo", click); + edit.addItem("Redo", click).setEnabled(false); + edit.addSeparator(); + + edit.addItem("Cut", click); + edit.addItem("Copy", click); + edit.addItem("Paste", click); + edit.addSeparator(); + + final MenuBar.MenuItem find = edit.addItem("Find/Replace", null); + + find.addItem("Google Search", click); + find.addSeparator(); + find.addItem("Find/Replace...", click); + find.addItem("Find Next", click); + find.addItem("Find Previous", click); + + Command check = new Command() { + @Override + public void menuSelected(MenuItem selectedItem) { + Notification.show(selectedItem.isChecked() ? "Checked" + : "Unchecked"); + } + }; + + final MenuBar.MenuItem view = menubar.addItem("View", null); + view.addItem("Show Status Bar", check).setCheckable(true); + MenuItem title = view.addItem("Show Title Bar", check); + title.setCheckable(true); + title.setChecked(true); + view.addItem("Customize Toolbar...", click); + view.addSeparator(); + + view.addItem("Actual Size", click); + view.addItem("Zoom In", click); + view.addItem("Zoom Out", click); + + MenuItem fav = menubar.addItem("", check); + fav.setIcon(TestIcon.get()); + fav.setStyleName("icon-only"); + fav.setCheckable(true); + fav.setChecked(true); + + fav = menubar.addItem("", check); + fav.setIcon(TestIcon.get()); + fav.setStyleName("icon-only"); + fav.setCheckable(true); + fav.setCheckable(true); + + menubar.addItem("Attach", click).setIcon(FontAwesome.PAPERCLIP); + menubar.addItem("Undo", click).setIcon(FontAwesome.UNDO); + MenuItem redo = menubar.addItem("Redo", click); + redo.setIcon(FontAwesome.REPEAT); + redo.setEnabled(false); + menubar.addItem("Upload", click).setIcon(FontAwesome.UPLOAD); + + return menubar; + } + + static MenuBar getToolBar() { + MenuBar menubar = new MenuBar(); + menubar.setWidth("100%"); + + MenuItem fav = menubar.addItem("", null); + fav.setIcon(FontAwesome.ALIGN_LEFT); + fav.setStyleName("icon-only"); + fav.setCheckable(true); + // fav.setChecked(true); + + fav = menubar.addItem("", null); + fav.setIcon(FontAwesome.ALIGN_CENTER); + fav.setStyleName("icon-only"); + fav.setCheckable(true); + + fav = menubar.addItem("", null); + fav.setIcon(FontAwesome.ALIGN_RIGHT); + fav.setStyleName("icon-only"); + fav.setCheckable(true); + + MenuItem clip = menubar.addItem("", null); + clip.setIcon(FontAwesome.PAPERCLIP); + clip.setStyleName("icon-only"); + + MenuItem undo = menubar.addItem("", null); + undo.setIcon(FontAwesome.UNDO); + undo.setStyleName("icon-only"); + + MenuItem redo = menubar.addItem("", null); + redo.setIcon(FontAwesome.REPEAT); + redo.setEnabled(false); + redo.setStyleName("icon-only"); + + return menubar; + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/NativeSelects.java b/uitest/src/com/vaadin/tests/themes/valo/NativeSelects.java new file mode 100644 index 0000000000..284f7c8d6e --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/NativeSelects.java @@ -0,0 +1,75 @@ +/* + * Copyright 2000-2013 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.ListSelect; +import com.vaadin.ui.NativeSelect; +import com.vaadin.ui.TwinColSelect; +import com.vaadin.ui.VerticalLayout; + +public class NativeSelects extends VerticalLayout implements View { + public NativeSelects() { + setMargin(true); + + Label h1 = new Label("Selects"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + NativeSelect select = new NativeSelect("Drop Down Select"); + row.addComponent(select); + + ListSelect list = new ListSelect("List Select"); + list.setNewItemsAllowed(true); + row.addComponent(list); + + TwinColSelect tcs = new TwinColSelect("TwinCol Select"); + tcs.setLeftColumnCaption("Left Column"); + tcs.setRightColumnCaption("Right Column"); + tcs.setNewItemsAllowed(true); + row.addComponent(tcs); + + TwinColSelect tcs2 = new TwinColSelect("Sized TwinCol Select"); + tcs2.setLeftColumnCaption("Left Column"); + tcs2.setRightColumnCaption("Right Column"); + tcs2.setNewItemsAllowed(true); + tcs2.setWidth("280px"); + tcs2.setHeight("200px"); + row.addComponent(tcs2); + + for (int i = 1; i <= 10; i++) { + select.addItem("Option " + i); + list.addItem("Option " + i); + tcs.addItem("Option " + i); + tcs2.addItem("Option " + i); + } + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/Panels.java b/uitest/src/com/vaadin/tests/themes/valo/Panels.java new file mode 100644 index 0000000000..74baef066b --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/Panels.java @@ -0,0 +1,175 @@ +/* + * Copyright 2000-2013 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.server.FontAwesome; +import com.vaadin.ui.Button; +import com.vaadin.ui.Component; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.MenuBar; +import com.vaadin.ui.MenuBar.MenuItem; +import com.vaadin.ui.Panel; +import com.vaadin.ui.VerticalLayout; + +public class Panels extends VerticalLayout implements View { + public Panels() { + setMargin(true); + + Label h1 = new Label("Panels & Layout panels"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + Panel panel = new Panel("Normal"); + panel.setIcon(TestIcon.get()); + panel.setContent(panelContent()); + row.addComponent(panel); + + panel = new Panel("Sized"); + panel.setIcon(TestIcon.get()); + panel.setWidth("10em"); + panel.setHeight("250px"); + panel.setContent(panelContent()); + row.addComponent(panel); + + panel = new Panel("Custom Caption"); + panel.setIcon(TestIcon.get()); + panel.addStyleName("color1"); + panel.setContent(panelContent()); + row.addComponent(panel); + + panel = new Panel("Custom Caption"); + panel.setIcon(TestIcon.get()); + panel.addStyleName("color2"); + panel.setContent(panelContent()); + row.addComponent(panel); + + panel = new Panel("Custom Caption"); + panel.setIcon(TestIcon.get()); + panel.addStyleName("color3"); + panel.setContent(panelContent()); + row.addComponent(panel); + + panel = new Panel("Borderless style"); + panel.setIcon(TestIcon.get()); + panel.addStyleName("borderless"); + panel.setContent(panelContent()); + row.addComponent(panel); + + panel = new Panel("Borderless + scroll divider"); + panel.setIcon(TestIcon.get()); + panel.addStyleName("borderless"); + panel.addStyleName("scroll-divider"); + panel.setContent(panelContentScroll()); + panel.setHeight("17em"); + row.addComponent(panel); + + panel = new Panel("Well style"); + panel.setIcon(TestIcon.get()); + panel.addStyleName("well"); + panel.setContent(panelContent()); + row.addComponent(panel); + + CssLayout layout = new CssLayout(); + layout.setIcon(TestIcon.get()); + layout.setCaption("Panel style layout"); + layout.addStyleName("card"); + layout.addComponent(panelContent()); + row.addComponent(layout); + + layout = new CssLayout(); + layout.addStyleName("card"); + row.addComponent(layout); + HorizontalLayout panelCaption = new HorizontalLayout(); + panelCaption.addStyleName("v-panel-caption"); + panelCaption.setWidth("100%"); + // panelCaption.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT); + Label label = new Label("Panel style layout"); + panelCaption.addComponent(label); + panelCaption.setExpandRatio(label, 1); + + Button action = new Button(); + action.setIcon(FontAwesome.PENCIL); + action.addStyleName("borderless-colored"); + action.addStyleName("small"); + action.addStyleName("icon-only"); + panelCaption.addComponent(action); + MenuBar dropdown = new MenuBar(); + dropdown.addStyleName("borderless"); + dropdown.addStyleName("small"); + MenuItem addItem = dropdown.addItem("", FontAwesome.CHEVRON_DOWN, null); + addItem.setStyleName("icon-only"); + addItem.addItem("Settings", null); + addItem.addItem("Preferences", null); + addItem.addSeparator(); + addItem.addItem("Sign Out", null); + panelCaption.addComponent(dropdown); + + layout.addComponent(panelCaption); + layout.addComponent(panelContent()); + layout.setWidth("14em"); + + layout = new CssLayout(); + layout.setIcon(TestIcon.get()); + layout.setCaption("Well style layout"); + layout.addStyleName("well"); + layout.addComponent(panelContent()); + row.addComponent(layout); + } + + Component panelContent() { + VerticalLayout layout = new VerticalLayout(); + layout.setSizeFull(); + layout.setMargin(true); + layout.setSpacing(true); + Label content = new Label( + "Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio."); + content.setWidth("10em"); + layout.addComponent(content); + Button button = new Button("Button"); + button.setSizeFull(); + layout.addComponent(button); + return layout; + } + + Component panelContentScroll() { + VerticalLayout layout = new VerticalLayout(); + layout.setMargin(true); + layout.setSpacing(true); + Label content = new Label( + "Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio."); + content.setWidth("10em"); + layout.addComponent(content); + Button button = new Button("Button"); + layout.addComponent(button); + return layout; + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/PopupViews.java b/uitest/src/com/vaadin/tests/themes/valo/PopupViews.java new file mode 100644 index 0000000000..c15270400c --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/PopupViews.java @@ -0,0 +1,101 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.shared.ui.label.ContentMode; +import com.vaadin.ui.Component; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.PopupView; +import com.vaadin.ui.PopupView.Content; +import com.vaadin.ui.VerticalLayout; + +public class PopupViews extends VerticalLayout implements View { + public PopupViews() { + setMargin(true); + + Label h1 = new Label("Popup Views"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + PopupView pv = new PopupView(new Content() { + @Override + public Component getPopupComponent() { + return new VerticalLayout() { + { + setMargin(true); + setWidth("300px"); + addComponent(new Label( + "Fictum, deserunt mollit anim laborum astutumque! Magna pars studiorum, prodita quaerimus.")); + } + }; + } + + @Override + public String getMinimizedValueAsHTML() { + return "Click to view"; + } + }); + row.addComponent(pv); + pv.setHideOnMouseOut(true); + pv.setCaption("Hide on mouse-out"); + + pv = new PopupView(new Content() { + int count = 0; + + @Override + public Component getPopupComponent() { + try { + Thread.sleep(1000); + } catch (InterruptedException e) { + + } + return new VerticalLayout() { + { + setMargin(true); + addComponent(new Label( + "<h3>Thanks for waiting!</h3><p>You've opened this popup <b>" + + ++count + " time" + + (count > 1 ? "s" : " only") + + "</b>.</p>", ContentMode.HTML)); + } + }; + } + + @Override + public String getMinimizedValueAsHTML() { + return "Show slow loading content"; + } + }); + row.addComponent(pv); + pv.setHideOnMouseOut(false); + pv.setCaption("Hide on click-outside"); + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/Sliders.java b/uitest/src/com/vaadin/tests/themes/valo/Sliders.java new file mode 100644 index 0000000000..363c698c32 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/Sliders.java @@ -0,0 +1,210 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.shared.ui.slider.SliderOrientation; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.ProgressBar; +import com.vaadin.ui.Slider; +import com.vaadin.ui.VerticalLayout; + +public class Sliders extends VerticalLayout implements View { + public Sliders() { + setMargin(true); + + Label h1 = new Label("Sliders"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + Slider slider = new Slider("Horizontal"); + slider.setValue(50.0); + row.addComponent(slider); + + slider = new Slider("Horizontal, sized"); + slider.setValue(50.0); + slider.setWidth("200px"); + row.addComponent(slider); + + slider = new Slider("Custom handle"); + slider.setValue(50.0); + slider.setWidth("200px"); + slider.addStyleName("color1"); + row.addComponent(slider); + + slider = new Slider("Custom track"); + slider.setValue(50.0); + slider.setWidth("200px"); + slider.addStyleName("color2"); + row.addComponent(slider); + + slider = new Slider("Custom indicator"); + slider.setValue(50.0); + slider.setWidth("200px"); + slider.addStyleName("color3"); + row.addComponent(slider); + + slider = new Slider("No indicator"); + slider.setValue(50.0); + slider.setWidth("200px"); + slider.addStyleName("no-indicator"); + row.addComponent(slider); + + slider = new Slider("With ticks (not in IE8 & IE9)"); + slider.setValue(3.0); + slider.setWidth("200px"); + slider.setMax(4); + slider.addStyleName("ticks"); + row.addComponent(slider); + + slider = new Slider("Toggle imitation"); + slider.setWidth("50px"); + slider.setResolution(0); + slider.setMin(0); + slider.setMax(1); + row.addComponent(slider); + + slider = new Slider("Vertical"); + slider.setValue(50.0); + slider.setOrientation(SliderOrientation.VERTICAL); + row.addComponent(slider); + + slider = new Slider("Vertical, sized"); + slider.setValue(50.0); + slider.setOrientation(SliderOrientation.VERTICAL); + slider.setHeight("200px"); + row.addComponent(slider); + + slider = new Slider("Custom handle"); + slider.setValue(50.0); + slider.setHeight("200px"); + slider.addStyleName("color1"); + slider.setOrientation(SliderOrientation.VERTICAL); + row.addComponent(slider); + + slider = new Slider("Custom track"); + slider.setValue(50.0); + slider.setHeight("200px"); + slider.addStyleName("color2"); + slider.setOrientation(SliderOrientation.VERTICAL); + row.addComponent(slider); + + slider = new Slider("Custom indicator"); + slider.setValue(50.0); + slider.setHeight("200px"); + slider.addStyleName("color3"); + slider.setOrientation(SliderOrientation.VERTICAL); + row.addComponent(slider); + + slider = new Slider("No indicator"); + slider.setValue(50.0); + slider.setHeight("200px"); + slider.addStyleName("no-indicator"); + slider.setOrientation(SliderOrientation.VERTICAL); + row.addComponent(slider); + + slider = new Slider("With ticks"); + slider.setValue(3.0); + slider.setHeight("200px"); + slider.setMax(4); + slider.addStyleName("ticks"); + slider.setOrientation(SliderOrientation.VERTICAL); + row.addComponent(slider); + + slider = new Slider("Disabled"); + slider.setValue(50.0); + slider.setEnabled(false); + row.addComponent(slider); + + h1 = new Label("Progress Bars"); + h1.addStyleName("h1"); + addComponent(h1); + + row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + pb = new ProgressBar(); + pb.setCaption("Default"); + pb.setWidth("300px"); + // pb.setValue(0.6f); + row.addComponent(pb); + + pb2 = new ProgressBar(); + pb2.setCaption("Point style"); + pb2.setWidth("300px"); + pb2.addStyleName("point"); + // pb2.setValue(0.6f); + row.addComponent(pb2); + + ProgressBar pb3 = new ProgressBar(); + pb3.setIndeterminate(true); + pb3.setCaption("Indeterminate"); + row.addComponent(pb3); + + } + + float progress = 0; + + Thread update = new Thread() { + @Override + public void run() { + while (true) { + try { + Thread.sleep(1000); + getUI().access(new Runnable() { + @Override + public void run() { + pb.setValue(progress); + pb2.setValue(progress); + if (progress > 1) { + progress = 0; + } else { + progress += 0.2 * Math.random(); + } + } + }); + } catch (InterruptedException e) { + break; + } + } + }; + }; + private ProgressBar pb; + private ProgressBar pb2; + + @Override + public void enter(ViewChangeEvent event) { + getUI().setPollInterval(1000); + update.start(); + } + + @Override + public void detach() { + getUI().setPollInterval(-1); + update.interrupt(); + super.detach(); + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/SplitPanels.java b/uitest/src/com/vaadin/tests/themes/valo/SplitPanels.java new file mode 100644 index 0000000000..9a6d86ae04 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/SplitPanels.java @@ -0,0 +1,95 @@ +/* + * Copyright 2000-2013 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.shared.ui.MarginInfo; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.HorizontalSplitPanel; +import com.vaadin.ui.Label; +import com.vaadin.ui.VerticalLayout; +import com.vaadin.ui.VerticalSplitPanel; + +public class SplitPanels extends VerticalLayout implements View { + public SplitPanels() { + setMargin(true); + + Label h1 = new Label("Split Panels"); + h1.addStyleName("h1"); + addComponent(h1); + + addComponent(new Label( + "Outlines are just to show the areas of the SplitPanels. They are not part of the actual component style.")); + + HorizontalLayout row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + row.setMargin(new MarginInfo(true, false, false, false)); + addComponent(row); + + HorizontalSplitPanel sp = new HorizontalSplitPanel(); + sp.setCaption("Default style"); + sp.setWidth("400px"); + sp.setHeight(null); + sp.setFirstComponent(getContent()); + sp.setSecondComponent(getContent()); + row.addComponent(sp); + + VerticalSplitPanel sp2 = new VerticalSplitPanel(); + sp2.setCaption("Default style"); + sp2.setWidth("300px"); + sp2.setHeight("200px"); + sp2.setFirstComponent(getContent()); + sp2.setSecondComponent(getContent()); + row.addComponent(sp2); + + sp = new HorizontalSplitPanel(); + sp.setCaption("Large style"); + sp.setWidth("300px"); + sp.setHeight("200px"); + sp.addStyleName("large"); + sp.setFirstComponent(getContent()); + sp.setSecondComponent(getContent()); + row.addComponent(sp); + + sp2 = new VerticalSplitPanel(); + sp2.setCaption("Large style"); + sp2.setWidth("300px"); + sp2.setHeight("200px"); + sp2.addStyleName("large"); + sp2.setFirstComponent(getContent()); + sp2.setSecondComponent(getContent()); + row.addComponent(sp2); + } + + VerticalLayout getContent() { + return new VerticalLayout() { + { + setMargin(true); + addComponent(new Label( + "Fictum, deserunt mollit anim laborum astutumque!")); + } + }; + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/Tables.java b/uitest/src/com/vaadin/tests/themes/valo/Tables.java new file mode 100644 index 0000000000..6aa02a7f74 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/Tables.java @@ -0,0 +1,284 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.data.Container; +import com.vaadin.data.Property.ValueChangeEvent; +import com.vaadin.data.Property.ValueChangeListener; +import com.vaadin.event.dd.DragAndDropEvent; +import com.vaadin.event.dd.DropHandler; +import com.vaadin.event.dd.acceptcriteria.AcceptAll; +import com.vaadin.event.dd.acceptcriteria.AcceptCriterion; +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.ui.Button; +import com.vaadin.ui.CheckBox; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.Notification; +import com.vaadin.ui.Table; +import com.vaadin.ui.Table.Align; +import com.vaadin.ui.Table.ColumnGenerator; +import com.vaadin.ui.Table.RowHeaderMode; +import com.vaadin.ui.Table.TableDragMode; +import com.vaadin.ui.TextField; +import com.vaadin.ui.TreeTable; +import com.vaadin.ui.VerticalLayout; + +public class Tables extends VerticalLayout implements View { + + static final Container normalContainer = ValoThemeTest.generateContainer( + 200, false); + static final Container hierarchicalContainer = ValoThemeTest + .generateContainer(200, true); + + CheckBox hierarchical = new CheckBox("Hierarchical"); + CheckBox footer = new CheckBox("Footer", true); + CheckBox sized = new CheckBox("Sized"); + CheckBox expandRatios = new CheckBox("Expand ratios"); + CheckBox stripes = new CheckBox("Sripes", true); + CheckBox verticalLines = new CheckBox("Vertical lines", true); + CheckBox horizontalLines = new CheckBox("Horizontal lines", true); + CheckBox borderless = new CheckBox("Borderless"); + CheckBox headers = new CheckBox("Header", true); + CheckBox compact = new CheckBox("Compact"); + CheckBox small = new CheckBox("Small"); + CheckBox rowIndex = new CheckBox("Row index", false); + CheckBox rowIcon = new CheckBox("Row icon", true); + CheckBox rowCaption = new CheckBox("Row caption", false); + + Table table; + + public Tables() { + setMargin(true); + setSpacing(true); + + Label h1 = new Label("Tables"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout wrap = new HorizontalLayout(); + wrap.addStyleName("wrapping"); + wrap.setSpacing(true); + addComponent(wrap); + + wrap.addComponents(hierarchical, footer, sized, expandRatios, stripes, + verticalLines, horizontalLines, borderless, headers, compact, + small, rowIndex, rowCaption, rowIcon); + + ValueChangeListener update = new ValueChangeListener() { + @Override + public void valueChange(ValueChangeEvent event) { + if (table == null) { + table = new Table(); + table.setContainerDataSource(normalContainer); + addComponent(table); + } + if (hierarchical.getValue() && table instanceof Table) { + removeComponent(table); + table = new TreeTable(); + table.setContainerDataSource(hierarchicalContainer); + addComponent(table); + } else if (!hierarchical.getValue() + && table instanceof TreeTable) { + removeComponent(table); + table = new Table(); + table.setContainerDataSource(normalContainer); + addComponent(table); + } + + configure(table, footer.getValue(), sized.getValue(), + expandRatios.getValue(), stripes.getValue(), + verticalLines.getValue(), horizontalLines.getValue(), + borderless.getValue(), headers.getValue(), + compact.getValue(), small.getValue(), + rowIndex.getValue(), rowCaption.getValue(), + rowIcon.getValue()); + } + }; + + hierarchical.addValueChangeListener(update); + footer.addValueChangeListener(update); + sized.addValueChangeListener(update); + expandRatios.addValueChangeListener(update); + stripes.addValueChangeListener(update); + verticalLines.addValueChangeListener(update); + horizontalLines.addValueChangeListener(update); + borderless.addValueChangeListener(update); + headers.addValueChangeListener(update); + compact.addValueChangeListener(update); + small.addValueChangeListener(update); + rowIndex.addValueChangeListener(update); + rowCaption.addValueChangeListener(update); + rowIcon.addValueChangeListener(update); + + footer.setValue(false); + + } + + static void configure(Table table, boolean footer, boolean sized, + boolean expandRatios, boolean stripes, boolean verticalLines, + boolean horizontalLines, boolean borderless, boolean headers, + boolean compact, boolean small, boolean rowIndex, + boolean rowCaption, boolean rowIcon) { + table.setSelectable(true); + table.setMultiSelect(true); + table.setSortEnabled(true); + table.setColumnCollapsingAllowed(true); + table.setColumnReorderingAllowed(true); + table.setPageLength(6); + table.addActionHandler(ValoThemeTest.getActionHandler()); + table.setDragMode(TableDragMode.MULTIROW); + table.setDropHandler(new DropHandler() { + @Override + public AcceptCriterion getAcceptCriterion() { + return AcceptAll.get(); + } + + @Override + public void drop(DragAndDropEvent event) { + Notification.show(event.getTransferable().toString()); + } + }); + table.setColumnAlignment(ValoThemeTest.DESCRIPTION_PROPERTY, + Align.RIGHT); + table.setColumnAlignment(ValoThemeTest.INDEX_PROPERTY, Align.CENTER); + + table.removeContainerProperty("textfield"); + table.addContainerProperty("textfield", TextField.class, null); + + table.removeGeneratedColumn("textfield"); + table.addGeneratedColumn("textfield", new ColumnGenerator() { + @Override + public Object generateCell(Table source, Object itemId, + Object columnId) { + TextField tf = new TextField(); + tf.setInputPrompt("Type here…"); + return tf; + } + }); + + table.removeContainerProperty("button"); + table.addContainerProperty("button", Button.class, null); + + table.removeGeneratedColumn("button"); + table.addGeneratedColumn("button", new ColumnGenerator() { + @Override + public Object generateCell(Table source, Object itemId, + Object columnId) { + Button b = new Button("Button"); + return b; + } + }); + + table.setFooterVisible(footer); + if (footer) { + table.setColumnFooter(ValoThemeTest.CAPTION_PROPERTY, "caption"); + table.setColumnFooter(ValoThemeTest.DESCRIPTION_PROPERTY, + "description"); + table.setColumnFooter(ValoThemeTest.ICON_PROPERTY, "icon"); + table.setColumnFooter(ValoThemeTest.INDEX_PROPERTY, "index"); + } + + if (sized) { + table.setWidth("400px"); + table.setHeight("300px"); + } else { + table.setSizeUndefined(); + } + + if (expandRatios) { + if (!sized) { + table.setWidth("100%"); + } + } + table.setColumnExpandRatio(ValoThemeTest.CAPTION_PROPERTY, + expandRatios ? 1.0f : 0); + table.setColumnExpandRatio(ValoThemeTest.DESCRIPTION_PROPERTY, + expandRatios ? 1.0f : 0); + + if (!stripes) { + table.addStyleName("no-stripes"); + } else { + table.removeStyleName("no-stripes"); + } + + if (!verticalLines) { + table.addStyleName("no-vertical-lines"); + } else { + table.removeStyleName("no-vertical-lines"); + } + + if (!horizontalLines) { + table.addStyleName("no-horizontal-lines"); + } else { + table.removeStyleName("no-horizontal-lines"); + } + + if (borderless) { + table.addStyleName("borderless"); + } else { + table.removeStyleName("borderless"); + } + + if (!headers) { + table.addStyleName("no-header"); + } else { + table.removeStyleName("no-header"); + } + + if (compact) { + table.addStyleName("compact"); + } else { + table.removeStyleName("compact"); + } + + if (small) { + table.addStyleName("small"); + } else { + table.removeStyleName("small"); + } + + if (!rowIndex && !rowCaption && rowIcon) { + table.setRowHeaderMode(RowHeaderMode.HIDDEN); + } + + if (rowIndex) { + table.setRowHeaderMode(RowHeaderMode.INDEX); + } + + if (rowCaption) { + table.setRowHeaderMode(RowHeaderMode.PROPERTY); + table.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY); + } else { + table.setItemCaptionPropertyId(null); + } + + if (rowIcon) { + table.setRowHeaderMode(RowHeaderMode.ICON_ONLY); + table.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY); + } else { + table.setItemIconPropertyId(null); + } + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/Tabsheets.java b/uitest/src/com/vaadin/tests/themes/valo/Tabsheets.java new file mode 100644 index 0000000000..24a249d90e --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/Tabsheets.java @@ -0,0 +1,201 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.data.Property.ValueChangeEvent; +import com.vaadin.data.Property.ValueChangeListener; +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.shared.ui.MarginInfo; +import com.vaadin.ui.CheckBox; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.TabSheet; +import com.vaadin.ui.TabSheet.SelectedTabChangeEvent; +import com.vaadin.ui.TabSheet.SelectedTabChangeListener; +import com.vaadin.ui.TabSheet.Tab; +import com.vaadin.ui.VerticalLayout; + +public class Tabsheets extends VerticalLayout implements View { + + TabSheet tabs; + + public Tabsheets() { + setMargin(true); + + Label h1 = new Label("Tabs"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout wrap = new HorizontalLayout(); + wrap.setSpacing(true); + wrap.addStyleName("wrapping"); + addComponent(wrap); + + final CheckBox closable = new CheckBox("Closable"); + closable.setImmediate(true); + wrap.addComponent(closable); + + final CheckBox overflow = new CheckBox("Overflow"); + overflow.setImmediate(true); + wrap.addComponent(overflow); + + final CheckBox caption = new CheckBox("Captions", true); + caption.setImmediate(true); + wrap.addComponent(caption); + + final CheckBox icon = new CheckBox("Icons"); + icon.setImmediate(true); + wrap.addComponent(icon); + + final CheckBox disable = new CheckBox("Disable tabs"); + disable.setImmediate(true); + wrap.addComponent(disable); + + Label h3 = new Label("Additional Styles"); + h3.addStyleName("h3"); + addComponent(h3); + + wrap = new HorizontalLayout(); + wrap.setSpacing(true); + wrap.addStyleName("wrapping"); + wrap.setMargin(new MarginInfo(false, false, true, false)); + addComponent(wrap); + + final CheckBox framed = new CheckBox("Framed", true); + framed.setImmediate(true); + wrap.addComponent(framed); + + final CheckBox centered = new CheckBox("Centered tabs"); + centered.setImmediate(true); + wrap.addComponent(centered); + + final CheckBox rightAlign = new CheckBox("Right-aligned tabs"); + rightAlign.setImmediate(true); + wrap.addComponent(rightAlign); + + final CheckBox equal = new CheckBox("Equal-width tabs"); + equal.setImmediate(true); + wrap.addComponent(equal); + + final CheckBox padded = new CheckBox("Padded tabbar"); + padded.setImmediate(true); + wrap.addComponent(padded); + + final CheckBox compact = new CheckBox("Compact"); + compact.setImmediate(true); + wrap.addComponent(compact); + + final CheckBox iconsOnTop = new CheckBox("Icons on top"); + iconsOnTop.setImmediate(true); + wrap.addComponent(iconsOnTop); + + final CheckBox selectedOnly = new CheckBox("Selected tab closable"); + selectedOnly.setImmediate(true); + wrap.addComponent(selectedOnly); + + ValueChangeListener update = new ValueChangeListener() { + @Override + public void valueChange(ValueChangeEvent event) { + String style = framed.getValue() ? "framed " : ""; + style += centered.getValue() ? " centered-tabs" : ""; + style += rightAlign.getValue() ? " right-aligned-tabs" : ""; + style += equal.getValue() ? " equal-width-tabs" : ""; + style += padded.getValue() ? " padded-tabbar" : ""; + style += compact.getValue() ? " compact-tabbar" : ""; + style += iconsOnTop.getValue() ? " icons-on-top" : ""; + style += selectedOnly.getValue() ? " only-selected-closable" + : ""; + + if (tabs != null) { + removeComponent(tabs); + } + tabs = getTabSheet(caption.getValue(), style.trim(), + closable.getValue(), overflow.getValue(), + icon.getValue(), disable.getValue()); + addComponent(tabs); + } + }; + closable.addValueChangeListener(update); + overflow.addValueChangeListener(update); + caption.addValueChangeListener(update); + icon.addValueChangeListener(update); + disable.addValueChangeListener(update); + framed.addValueChangeListener(update); + centered.addValueChangeListener(update); + rightAlign.addValueChangeListener(update); + equal.addValueChangeListener(update); + padded.addValueChangeListener(update); + compact.addValueChangeListener(update); + iconsOnTop.addValueChangeListener(update); + selectedOnly.addValueChangeListener(update); + + // Generate initial view + icon.setValue(true); + } + + static TabSheet getTabSheet(boolean caption, String style, + boolean closable, boolean scrolling, boolean icon, boolean disable) { + TabSheet ts = new TabSheet(); + ts.addStyleName(style); + + for (int i = 1; i <= (scrolling ? 10 : 3); i++) { + String tabcaption = caption ? ValoThemeTest.nextString(true) + " " + + ValoThemeTest.nextString(false) : null; + + VerticalLayout content = new VerticalLayout(); + content.setMargin(true); + content.setSpacing(true); + content.addComponent(new Label("Content for tab " + i)); + if (i == 2) { + content.addComponent(new Label( + "Excepteur sint obcaecat cupiditat non proident culpa. Magna pars studiorum, prodita quaerimus.")); + } + Tab t = ts.addTab(content, tabcaption); + t.setClosable(closable); + t.setEnabled(!disable); + + // First tab is always enabled + if (i == 1) { + t.setEnabled(true); + } + + if (icon) { + t.setIcon(TestIcon.get(false)); + } + } + + ts.addSelectedTabChangeListener(new SelectedTabChangeListener() { + @Override + public void selectedTabChange(SelectedTabChangeEvent event) { + try { + Thread.sleep(1000); + } catch (InterruptedException e) { + e.printStackTrace(); + } + } + }); + + return ts; + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/TestIcon.java b/uitest/src/com/vaadin/tests/themes/valo/TestIcon.java new file mode 100644 index 0000000000..18b834f1bf --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/TestIcon.java @@ -0,0 +1,55 @@ +/* + * Copyright 2000-2013 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import java.util.Arrays; +import java.util.Collections; +import java.util.List; + +import com.vaadin.server.FontAwesome; +import com.vaadin.server.Resource; +import com.vaadin.server.ThemeResource; + +/** + * + * @since + * @author Vaadin Ltd + */ +public class TestIcon { + + public static Resource get() { + return get(false, 32); + } + + public static Resource get(boolean isImage) { + return get(isImage, 32); + } + + public static Resource get(boolean isImage, int imageSize) { + if (!isImage) { + if (++iconCount >= ICONS.size()) { + iconCount = 0; + } + return ICONS.get(iconCount); + } + return new ThemeResource("../runo/icons/" + imageSize + "/document.png"); + } + + static List<FontAwesome> ICONS = Collections.unmodifiableList(Arrays + .asList(FontAwesome.values())); + + static int iconCount = 0; +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/TextFields.java b/uitest/src/com/vaadin/tests/themes/valo/TextFields.java new file mode 100644 index 0000000000..cbe7a8a0b3 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/TextFields.java @@ -0,0 +1,259 @@ +/* + * Copyright 2000-2013 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.server.FontAwesome; +import com.vaadin.server.UserError; +import com.vaadin.ui.Button; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.PasswordField; +import com.vaadin.ui.RichTextArea; +import com.vaadin.ui.TextArea; +import com.vaadin.ui.TextField; +import com.vaadin.ui.VerticalLayout; + +public class TextFields extends VerticalLayout implements View { + public TextFields() { + setMargin(true); + + Label h1 = new Label("Text Fields"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + TextField tf = new TextField("Normal"); + tf.setInputPrompt("First name"); + tf.setIcon(TestIcon.get()); + row.addComponent(tf); + + tf = new TextField("Custom color"); + tf.setInputPrompt("Email"); + tf.addStyleName("color1"); + row.addComponent(tf); + + tf = new TextField("User Color"); + tf.setInputPrompt("Gender"); + tf.addStyleName("color2"); + row.addComponent(tf); + + tf = new TextField("Themed"); + tf.setInputPrompt("Age"); + tf.addStyleName("color3"); + row.addComponent(tf); + + tf = new TextField("Error"); + tf.setValue("Something’s wrong"); + tf.setComponentError(new UserError("Fix it, now!")); + row.addComponent(tf); + + tf = new TextField("Error, borderless"); + tf.setValue("Something’s wrong"); + tf.setComponentError(new UserError("Fix it, now!")); + tf.addStyleName("borderless"); + row.addComponent(tf); + + tf = new TextField("Read-only"); + tf.setInputPrompt("Nationality"); + tf.setValue("Finnish"); + tf.setReadOnly(true); + row.addComponent(tf); + + tf = new TextField("Small"); + tf.setValue("Field value"); + tf.addStyleName("small"); + row.addComponent(tf); + + tf = new TextField("Large"); + tf.setValue("Field value"); + tf.addStyleName("large"); + tf.setIcon(TestIcon.get(true)); + row.addComponent(tf); + + tf = new TextField("Icon inside"); + tf.setInputPrompt("Ooh, an icon"); + tf.addStyleName("inline-icon"); + tf.setIcon(TestIcon.get()); + row.addComponent(tf); + + tf = new TextField("Large, Icon inside"); + tf.setInputPrompt("Ooh, an icon"); + tf.addStyleName("large"); + tf.addStyleName("inline-icon"); + tf.setIcon(TestIcon.get()); + row.addComponent(tf); + + tf = new TextField("Small, Icon inside"); + tf.setInputPrompt("Ooh, an icon"); + tf.addStyleName("small"); + tf.addStyleName("inline-icon"); + tf.setIcon(TestIcon.get()); + row.addComponent(tf); + + tf = new TextField("16px supported by default"); + tf.setInputPrompt("Image icon"); + tf.addStyleName("inline-icon"); + tf.setIcon(TestIcon.get(true, 16)); + row.addComponent(tf); + + tf = new TextField(); + tf.setValue("Font, no caption"); + tf.addStyleName("inline-icon"); + tf.setIcon(TestIcon.get()); + row.addComponent(tf); + + tf = new TextField(); + tf.setValue("Image, no caption"); + tf.addStyleName("inline-icon"); + tf.setIcon(TestIcon.get(true, 16)); + row.addComponent(tf); + + CssLayout group = new CssLayout(); + group.addStyleName("v-component-group"); + row.addComponent(group); + + tf = new TextField(); + tf.setInputPrompt("Grouped with a button"); + tf.addStyleName("inline-icon"); + tf.setIcon(TestIcon.get()); + tf.setWidth("260px"); + group.addComponent(tf); + + Button button = new Button("Do It"); + // button.addStyleName("primary"); + group.addComponent(button); + + tf = new TextField("Borderless"); + tf.setInputPrompt("Write here…"); + tf.addStyleName("inline-icon"); + tf.addStyleName("borderless"); + tf.setIcon(TestIcon.get()); + row.addComponent(tf); + + tf = new TextField("Right-aligned"); + tf.setValue("1,234"); + tf.addStyleName("align-right"); + row.addComponent(tf); + + tf = new TextField("Centered"); + tf.setInputPrompt("Guess what?"); + tf.addStyleName("align-center"); + row.addComponent(tf); + + PasswordField pwf = new PasswordField("Password"); + pwf.setInputPrompt("Secret words"); + pwf.addStyleName("inline-icon"); + pwf.setIcon(FontAwesome.LOCK); + row.addComponent(pwf); + + pwf = new PasswordField("Password, right-aligned"); + pwf.setInputPrompt("Secret words"); + pwf.addStyleName("inline-icon"); + pwf.addStyleName("align-right"); + pwf.setIcon(FontAwesome.LOCK); + row.addComponent(pwf); + + pwf = new PasswordField("Password, centered"); + pwf.setInputPrompt("Secret words"); + pwf.addStyleName("inline-icon"); + pwf.addStyleName("align-center"); + pwf.setIcon(FontAwesome.LOCK); + row.addComponent(pwf); + + h1 = new Label("Text Areas"); + h1.addStyleName("h1"); + addComponent(h1); + + row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + TextArea ta = new TextArea("Normal"); + ta.setInputPrompt("Write your comment…"); + row.addComponent(ta); + + ta = new TextArea("Inline icon"); + ta.setInputPrompt("Inline icon not really working"); + ta.addStyleName("inline-icon"); + ta.setIcon(TestIcon.get()); + row.addComponent(ta); + + ta = new TextArea("Custom color"); + ta.addStyleName("color1"); + ta.setInputPrompt("Write your comment…"); + row.addComponent(ta); + + ta = new TextArea("Custom color, read-only"); + ta.addStyleName("color2"); + ta.setValue("Field value, spanning multiple lines of text"); + ta.setReadOnly(true); + row.addComponent(ta); + + ta = new TextArea("Custom color"); + ta.addStyleName("color3"); + ta.setValue("Field value, spanning multiple lines of text"); + row.addComponent(ta); + + ta = new TextArea("Small"); + ta.addStyleName("small"); + ta.setInputPrompt("Write your comment…"); + row.addComponent(ta); + + ta = new TextArea("Large"); + ta.addStyleName("large"); + ta.setInputPrompt("Write your comment…"); + row.addComponent(ta); + + ta = new TextArea("Borderless"); + ta.addStyleName("borderless"); + ta.setInputPrompt("Write your comment…"); + row.addComponent(ta); + + ta = new TextArea("Right-aligned"); + ta.addStyleName("align-right"); + ta.setValue("Field value, spanning multiple lines of text"); + row.addComponent(ta); + + ta = new TextArea("Centered"); + ta.addStyleName("align-center"); + ta.setValue("Field value, spanning multiple lines of text"); + row.addComponent(ta); + + RichTextArea rta = new RichTextArea(); + rta.setValue("<b>Some</b> <i>rich</i> content"); + row.addComponent(rta); + + rta = new RichTextArea("Read-only"); + rta.setValue("<b>Some</b> <i>rich</i> content"); + rta.setReadOnly(true); + row.addComponent(rta); + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/Trees.java b/uitest/src/com/vaadin/tests/themes/valo/Trees.java new file mode 100644 index 0000000000..bb406e4f39 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/Trees.java @@ -0,0 +1,78 @@ +/* + * Copyright 2000-2013 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.data.Container; +import com.vaadin.event.dd.DragAndDropEvent; +import com.vaadin.event.dd.DropHandler; +import com.vaadin.event.dd.acceptcriteria.AcceptAll; +import com.vaadin.event.dd.acceptcriteria.AcceptCriterion; +import com.vaadin.navigator.View; +import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.Notification; +import com.vaadin.ui.Tree; +import com.vaadin.ui.Tree.TreeDragMode; +import com.vaadin.ui.VerticalLayout; + +public class Trees extends VerticalLayout implements View { + public Trees() { + setMargin(true); + + Label h1 = new Label("Trees"); + h1.addStyleName("h1"); + addComponent(h1); + + HorizontalLayout row = new HorizontalLayout(); + row.addStyleName("wrapping"); + row.setSpacing(true); + addComponent(row); + + Tree tree = new Tree(); + tree.setSelectable(true); + tree.setMultiSelect(true); + Container generateContainer = ValoThemeTest.generateContainer(10, true); + tree.setContainerDataSource(generateContainer); + tree.setDragMode(TreeDragMode.NODE); + row.addComponent(tree); + tree.setItemCaptionPropertyId(ValoThemeTest.CAPTION_PROPERTY); + tree.setItemIconPropertyId(ValoThemeTest.ICON_PROPERTY); + tree.expandItem(generateContainer.getItemIds().iterator().next()); + + tree.setDropHandler(new DropHandler() { + @Override + public AcceptCriterion getAcceptCriterion() { + return AcceptAll.get(); + } + + @Override + public void drop(DragAndDropEvent event) { + Notification.show(event.getTransferable().toString()); + } + }); + + // Add actions (context menu) + tree.addActionHandler(ValoThemeTest.getActionHandler()); + } + + @Override + public void enter(ViewChangeEvent event) { + // TODO Auto-generated method stub + + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoMenuLayout.java b/uitest/src/com/vaadin/tests/themes/valo/ValoMenuLayout.java new file mode 100644 index 0000000000..3a3baa686c --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/ValoMenuLayout.java @@ -0,0 +1,56 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.ui.Component; +import com.vaadin.ui.ComponentContainer; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.HorizontalLayout; + +/** + * + * @since + * @author Vaadin Ltd + */ +public class ValoMenuLayout extends HorizontalLayout { + + CssLayout contentArea = new CssLayout(); + + CssLayout menuArea = new CssLayout(); + + public ValoMenuLayout() { + setSizeFull(); + + menuArea.setPrimaryStyleName("valo-menu"); + + contentArea.setPrimaryStyleName("valo-content"); + contentArea.addStyleName("v-scrollable"); + contentArea.setSizeFull(); + + addComponents(menuArea, contentArea); + setExpandRatio(contentArea, 1); + } + + public ComponentContainer getContentContainer() { + return contentArea; + } + + public void addMenu(Component menu) { + menu.addStyleName("valo-menu-part"); + menuArea.addComponent(menu); + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoMiscTests.java b/uitest/src/com/vaadin/tests/themes/valo/ValoMiscTests.java new file mode 100644 index 0000000000..222dd90e49 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/ValoMiscTests.java @@ -0,0 +1,85 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import com.vaadin.server.VaadinRequest; +import com.vaadin.ui.Alignment; +import com.vaadin.ui.Button; +import com.vaadin.ui.CheckBox; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.InlineDateField; +import com.vaadin.ui.Panel; +import com.vaadin.ui.TreeTable; +import com.vaadin.ui.UI; +import com.vaadin.ui.VerticalLayout; + +public class ValoMiscTests extends UI { + + VerticalLayout layout = new VerticalLayout(); + + public ValoMiscTests() { + layout.setMargin(true); + + Panel p = new Panel(); + // layout.addComponent(p); + + HorizontalLayout row = new HorizontalLayout(); + p.setHeight("300px"); + // row.setSpacing(true); + // row.setMargin(true); + row.setDefaultComponentAlignment(Alignment.BOTTOM_CENTER); + row.setWidth("100%"); + // row.setHeight("248px"); + row.setSizeFull(); + + Button button = new Button("Boo"); + button.setWidth("100%"); + Button button2 = new Button("Abc"); + button2.setWidth("100%"); + row.addComponents(button, new InlineDateField(), new CheckBox("Far")); + + p.setContent(row); + + p = new Panel(); + // layout.addComponent(p); + p.setHeight("400px"); + + VerticalLayout col = new VerticalLayout(); + col.setSizeFull(); + col.setSpacing(true); + // row.setMargin(true); + col.setDefaultComponentAlignment(Alignment.BOTTOM_CENTER); + + col.addComponents(new Button("Boo"), new InlineDateField(), + new CheckBox("Far"), new Button("Abc")); + + p.setContent(col); + + TreeTable table = new TreeTable(); + table.setWidth("100%"); + table.setContainerDataSource(Tables.hierarchicalContainer); + Tables.configure(table, true, false, false, true, true, true, false, + true, false, false, false, false, false); + layout.addComponent(table); + + } + + @Override + protected void init(VaadinRequest request) { + setContent(layout); + } + +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java new file mode 100644 index 0000000000..014b1acac8 --- /dev/null +++ b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeTest.java @@ -0,0 +1,364 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.themes.valo; + +import java.util.Iterator; +import java.util.LinkedHashMap; +import java.util.Map.Entry; + +import com.vaadin.annotations.PreserveOnRefresh; +import com.vaadin.annotations.Theme; +import com.vaadin.annotations.Title; +import com.vaadin.data.Container; +import com.vaadin.data.Container.Hierarchical; +import com.vaadin.data.Item; +import com.vaadin.data.Property.ValueChangeEvent; +import com.vaadin.data.Property.ValueChangeListener; +import com.vaadin.data.util.HierarchicalContainer; +import com.vaadin.data.util.IndexedContainer; +import com.vaadin.event.Action; +import com.vaadin.event.Action.Handler; +import com.vaadin.navigator.Navigator; +import com.vaadin.navigator.ViewChangeListener; +import com.vaadin.server.FontAwesome; +import com.vaadin.server.Page; +import com.vaadin.server.Resource; +import com.vaadin.server.VaadinRequest; +import com.vaadin.shared.ui.label.ContentMode; +import com.vaadin.ui.Alignment; +import com.vaadin.ui.Button; +import com.vaadin.ui.Button.ClickEvent; +import com.vaadin.ui.Button.ClickListener; +import com.vaadin.ui.CheckBox; +import com.vaadin.ui.Component; +import com.vaadin.ui.ComponentContainer; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.MenuBar; +import com.vaadin.ui.MenuBar.MenuItem; +import com.vaadin.ui.Notification; +import com.vaadin.ui.UI; + +@Theme("tests-valo") +@Title("Valo Theme Test") +@PreserveOnRefresh +public class ValoThemeTest extends UI { + + ValoMenuLayout root = new ValoMenuLayout(); + ComponentContainer viewDisplay = root.getContentContainer(); + CssLayout menu = new CssLayout(); + private Navigator navigator; + private LinkedHashMap<String, String> menuItems = new LinkedHashMap<String, String>(); + + @Override + protected void init(VaadinRequest request) { + // Show .v-app-loading valo-menu-badge + // try { + // Thread.sleep(2000); + // } catch (InterruptedException e) { + // e.printStackTrace(); + // } + + getPage().setTitle("Valo Theme Test"); + setContent(root); + root.setWidth("100%"); + + root.addMenu(buildTestMenu()); + root.addMenu(buildMenu()); + + navigator = new Navigator(this, viewDisplay); + + navigator.addView("common", CommonParts.class); + navigator.addView("labels", Labels.class); + navigator.addView("buttons-and-links", ButtonsAndLinks.class); + navigator.addView("textfields", TextFields.class); + navigator.addView("datefields", DateFields.class); + navigator.addView("comboboxes", ComboBoxes.class); + navigator.addView("checkboxes", CheckBoxes.class); + navigator.addView("sliders", Sliders.class); + navigator.addView("menubars", MenuBars.class); + navigator.addView("panels", Panels.class); + navigator.addView("trees", Trees.class); + navigator.addView("tables", Tables.class); + navigator.addView("splitpanels", SplitPanels.class); + navigator.addView("tabs", Tabsheets.class); + navigator.addView("accordions", Accordions.class); + navigator.addView("colorpickers", ColorPickers.class); + navigator.addView("selects", NativeSelects.class); + navigator.addView("calendar", CalendarTest.class); + navigator.addView("forms", Forms.class); + navigator.addView("popupviews", PopupViews.class); + navigator.addView("dragging", Dragging.class); + + String f = Page.getCurrent().getUriFragment(); + if (f == null || f.equals("")) { + navigator.navigateTo("common"); + } + + navigator.addViewChangeListener(new ViewChangeListener() { + + @Override + public boolean beforeViewChange(ViewChangeEvent event) { + return true; + } + + @Override + public void afterViewChange(ViewChangeEvent event) { + for (Iterator<Component> it = menu.iterator(); it.hasNext();) { + it.next().removeStyleName("selected"); + } + for (Entry<String, String> item : menuItems.entrySet()) { + if (event.getViewName().equals(item.getKey())) { + for (Iterator<Component> it = menu.iterator(); it + .hasNext();) { + Component c = it.next(); + if (c.getCaption() != null + && c.getCaption().startsWith( + item.getValue())) { + c.addStyleName("selected"); + break; + } + } + break; + } + } + } + }); + + } + + Component buildTestMenu() { + CssLayout menu = new CssLayout(); + menu.addStyleName("large-icons"); + + Label logo = new Label("Va"); + logo.setSizeUndefined(); + logo.setPrimaryStyleName("valo-menu-logo"); + menu.addComponent(logo); + + Button b = new Button( + "Reference <span class=\"valo-menu-badge\">3</span>"); + b.setIcon(FontAwesome.TH_LIST); + b.setPrimaryStyleName("valo-menu-item"); + b.addStyleName("selected"); + b.setHtmlContentAllowed(true); + menu.addComponent(b); + + b = new Button("API"); + b.setIcon(FontAwesome.BOOK); + b.setPrimaryStyleName("valo-menu-item"); + menu.addComponent(b); + + b = new Button("Examples <span class=\"valo-menu-badge\">12</span>"); + b.setIcon(FontAwesome.TABLE); + b.setPrimaryStyleName("valo-menu-item"); + b.setHtmlContentAllowed(true); + menu.addComponent(b); + + return menu; + } + + CssLayout buildMenu() { + // Add items + menuItems.put("common", "Common UI Elements"); + menuItems.put("labels", "Labels"); + menuItems.put("buttons-and-links", "Buttons & Links"); + menuItems.put("textfields", "Text Fields"); + menuItems.put("datefields", "Date Fields"); + menuItems.put("comboboxes", "Combo Boxes"); + menuItems.put("selects", "Selects"); + menuItems.put("checkboxes", "Check Boxes & Option Groups"); + menuItems.put("sliders", "Sliders & Progress Bars"); + menuItems.put("colorpickers", "Color Pickers"); + menuItems.put("menubars", "Menu Bars"); + menuItems.put("trees", "Trees"); + menuItems.put("tables", "Tables"); + menuItems.put("dragging", "Drag and Drop"); + menuItems.put("panels", "Panels"); + menuItems.put("splitpanels", "Split Panels"); + menuItems.put("tabs", "Tabs"); + menuItems.put("accordions", "Accordions"); + menuItems.put("popupviews", "Popup Views"); + menuItems.put("calendar", "Calendar"); + menuItems.put("forms", "Forms"); + + HorizontalLayout top = new HorizontalLayout(); + top.setWidth("100%"); + top.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT); + top.addStyleName("valo-menu-title"); + menu.addComponent(top); + + Label title = new Label("Vaadin<br><strong>Valo Theme Styles</strong>", + ContentMode.HTML); + title.setSizeUndefined(); + top.addComponent(title); + top.setExpandRatio(title, 1); + + MenuBar settings = new MenuBar(); + MenuItem settingsItem = settings.addItem("", FontAwesome.COG, null); + settingsItem.setStyleName("icon-only"); + settingsItem.addItem("Edit Profile", null); + settingsItem.addItem("Preferences", null); + settingsItem.addSeparator(); + settingsItem.addItem("Sign Out", null); + top.addComponent(settings); + + final CheckBox enabled = new CheckBox("Enabled", true); + enabled.setDescription("Enable or disable the components on the right side"); + menu.addComponent(enabled); + enabled.addValueChangeListener(new ValueChangeListener() { + @Override + public void valueChange(ValueChangeEvent event) { + viewDisplay.setEnabled(enabled.getValue()); + } + }); + + Label label = null; + int count = -1; + for (final Entry<String, String> item : menuItems.entrySet()) { + if (item.getKey().equals("labels")) { + label = new Label("Components", ContentMode.HTML); + label.setPrimaryStyleName("valo-menu-subtitle"); + label.addStyleName("h4"); + label.setSizeUndefined(); + menu.addComponent(label); + } + if (item.getKey().equals("panels")) { + label.setValue(label.getValue() + + " <span class=\"valo-menu-badge\">" + count + + "</span>"); + count = 0; + label = new Label("Containers", ContentMode.HTML); + label.setPrimaryStyleName("valo-menu-subtitle"); + label.addStyleName("h4"); + label.setSizeUndefined(); + menu.addComponent(label); + } + if (item.getKey().equals("calendar")) { + label.setValue(label.getValue() + + " <span class=\"valo-menu-badge\">" + count + + "</span>"); + count = 0; + label = new Label("Other", ContentMode.HTML); + label.setPrimaryStyleName("valo-menu-subtitle"); + label.addStyleName("h4"); + label.setSizeUndefined(); + menu.addComponent(label); + } + Button b = new Button(item.getValue(), new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + navigator.navigateTo(item.getKey()); + } + }); + if (count == 2) { + b.setCaption(b.getCaption() + + " <span class=\"valo-menu-badge\">123</span>"); + } + b.setHtmlContentAllowed(true); + b.setPrimaryStyleName("valo-menu-item"); + b.setIcon(TestIcon.get()); + menu.addComponent(b); + count++; + } + label.setValue(label.getValue() + " <span class=\"valo-menu-badge\">" + + count + "</span>"); + + return menu; + } + + static String[] strings = new String[] { "lorem", "ipsum", "dolor", "sit", + "amet", "consectetur", "quid", "securi", "etiam", "tamquam", "eu", + "fugiat", "nulla", "pariatur" }; + static int stringCount = -1; + + static String nextString(boolean capitalize) { + if (++stringCount >= strings.length) { + stringCount = 0; + } + return capitalize ? strings[stringCount].substring(0, 1).toUpperCase() + + strings[stringCount].substring(1) : strings[stringCount]; + } + + static Handler actionHandler = new Handler() { + private final Action ACTION_ONE = new Action("Action One"); + private final Action ACTION_TWO = new Action("Action Two"); + private final Action ACTION_THREE = new Action("Action Three"); + private final Action[] ACTIONS = new Action[] { ACTION_ONE, ACTION_TWO, + ACTION_THREE }; + + @Override + public void handleAction(Action action, Object sender, Object target) { + Notification.show(action.getCaption()); + } + + @Override + public Action[] getActions(Object target, Object sender) { + return ACTIONS; + } + }; + + static Handler getActionHandler() { + return actionHandler; + } + + static final String CAPTION_PROPERTY = "caption"; + static final String DESCRIPTION_PROPERTY = "description"; + static final String ICON_PROPERTY = "icon"; + static final String INDEX_PROPERTY = "index"; + + @SuppressWarnings("unchecked") + static Container generateContainer(final int size, + final boolean hierarchical) { + IndexedContainer container = hierarchical ? new HierarchicalContainer() + : new IndexedContainer(); + + container.addContainerProperty(CAPTION_PROPERTY, String.class, null); + container.addContainerProperty(ICON_PROPERTY, Resource.class, null); + container.addContainerProperty(INDEX_PROPERTY, Integer.class, null); + container + .addContainerProperty(DESCRIPTION_PROPERTY, String.class, null); + for (int i = 1; i < size + 1; i++) { + Item item = container.addItem(i); + item.getItemProperty(CAPTION_PROPERTY).setValue( + nextString(true) + " " + nextString(false)); + item.getItemProperty(INDEX_PROPERTY).setValue(i); + item.getItemProperty(DESCRIPTION_PROPERTY).setValue( + nextString(true) + " " + nextString(false) + " " + + nextString(false)); + item.getItemProperty(ICON_PROPERTY).setValue(TestIcon.get()); + } + container.getItem(container.getIdByIndex(0)) + .getItemProperty(ICON_PROPERTY).setValue(TestIcon.get()); + + if (hierarchical) { + for (int i = 1; i < size + 1; i++) { + for (int j = 1; j < 5; j++) { + String id = i + " -> " + j; + Item child = container.addItem(id); + child.getItemProperty(CAPTION_PROPERTY).setValue( + nextString(true) + " " + nextString(false)); + child.getItemProperty(ICON_PROPERTY).setValue( + TestIcon.get()); + ((Hierarchical) container).setChildrenAllowed(id, false); + ((Hierarchical) container).setParent(id, i); + } + } + } + return container; + } +}
\ No newline at end of file |
