diff options
| author | Teemu Suo-Anttila <teemusa@vaadin.com> | 2014-07-01 13:32:29 +0300 |
|---|---|---|
| committer | Teemu Suo-Anttila <teemusa@vaadin.com> | 2014-07-01 13:33:21 +0300 |
| commit | b159b8bfe615b7fb273d652b9c9bbc9f04901873 (patch) | |
| tree | d8c3b9b7ac5e31ac46d68895985014e443ba7572 /WebContent | |
| parent | cad8f2bf2c02fbe2a6f406d51103909d78033c9d (diff) | |
| parent | 264e617c58d537d12a03b5f3fb73f5129fcadc09 (diff) | |
| download | vaadin-framework-b159b8bfe615b7fb273d652b9c9bbc9f04901873.tar.gz vaadin-framework-b159b8bfe615b7fb273d652b9c9bbc9f04901873.zip | |
Merge remote-tracking branch 'origin/master' into grid
Conflicts:
WebContent/release-notes.html
Change-Id: I515edf75b3ba2eb0bf94fa0d747cadbce2c79a21
Diffstat (limited to 'WebContent')
311 files changed, 13476 insertions, 396 deletions
diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss index 58274edacb..6263646ce1 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"; @@ -41,7 +42,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 { @@ -123,5 +123,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/debug/fonts/font.eot b/WebContent/VAADIN/themes/base/debug/fonts/font.eot Binary files differdeleted file mode 100755 index c2a63b3f08..0000000000 --- a/WebContent/VAADIN/themes/base/debug/fonts/font.eot +++ /dev/null diff --git a/WebContent/VAADIN/themes/base/debug/fonts/font.svg b/WebContent/VAADIN/themes/base/debug/fonts/font.svg deleted file mode 100755 index 9d00e7b2fc..0000000000 --- a/WebContent/VAADIN/themes/base/debug/fonts/font.svg +++ /dev/null @@ -1,36 +0,0 @@ -<?xml version="1.0" standalone="no"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > -<svg xmlns="http://www.w3.org/2000/svg"> -<metadata>Generated by IcoMoon</metadata> -<defs> -<font id="icomoon" horiz-adv-x="512"> -<font-face units-per-em="512" ascent="480" descent="-32" /> -<missing-glyph horiz-adv-x="512" /> -<glyph unicode=" " d="" horiz-adv-x="256" /> -<glyph unicode="" d="M381.186 86.878l-19.971 158.833c-5.863 46.622-48.723 84.419-95.716 84.419h-14.532c-47.001 0-89.858-37.817-95.716-84.419l-19.97-158.833c-1.436-11.424 6.727-20.682 18.243-20.682h209.425c11.51 0 19.677 9.259 18.24 20.682zM258.649 282.012c-0.247-0.002-0.88-0.024-1.846-0.089-1.701-0.113-3.619-0.303-5.697-0.592-5.904-0.816-11.787-2.227-17.148-4.329-4.881-1.913-9.060-4.299-12.364-7.148-2.764-2.384-5.232-5.065-7.418-7.995-3.359-4.502-5.904-9.371-7.723-14.231-0.628-1.681-1.117-3.22-1.477-4.573-0.119-0.443-0.212-0.821-0.316-1.281-1.186-6.304-7.257-10.453-13.564-9.268-6.304 1.186-10.453 7.257-9.268 13.564 0.127 0.667 0.355 1.684 0.705 2.995 0.548 2.050 1.262 4.301 2.161 6.703 2.546 6.805 6.097 13.6 10.862 19.983 3.173 4.252 6.786 8.176 10.868 11.697 5.449 4.699 11.878 8.372 19.062 11.185 7.233 2.832 14.846 4.657 22.436 5.708 2.645 0.366 5.115 0.613 7.35 0.759 1.398 0.092 2.451 0.131 3.103 0.139 6.414 0.075 11.675-5.065 11.752-11.479 0.077-6.412-5.062-11.675-11.476-11.75zM240.26 405.353c0-9.469 7.678-17.147 17.147-17.147s17.147 7.678 17.147 17.147v55.31c0 9.469-7.678 17.147-17.147 17.147s-17.147-7.678-17.147-17.147v-55.31zM382.291 357.86c-8.071-4.954-10.599-15.509-5.649-23.581s15.509-10.6 23.581-5.649l47.144 28.922c8.071 4.953 10.599 15.509 5.649 23.581-4.954 8.071-15.509 10.6-23.581 5.649l-47.144-28.921zM109.74 327.524c8.071-4.953 18.629-2.422 23.581 5.649 4.953 8.071 2.422 18.63-5.649 23.581l-47.144 28.921c-8.071 4.954-18.63 2.422-23.581-5.649-4.953-8.071-2.422-18.63 5.649-23.581l47.145-28.921zM146.053 49.625c-11.511 0-20.84-9.339-20.84-20.836v-30.617c0-11.507 9.314-20.836 20.84-20.836h222.163c11.51 0 20.841 9.339 20.841 20.836v30.617c0 11.507-9.313 20.836-20.841 20.836h-222.163z" horiz-adv-x="536" /> -<glyph unicode="" d="M329.143 242.286q0 52.857-37.572 90.428t-90.428 37.572-90.428-37.572-37.572-90.428 37.572-90.428 90.428-37.572 90.428 37.572 37.572 90.428zM475.428 4.572q0-14.857-10.857-25.714t-25.714-10.857q-15.428 0-25.714 10.857l-98 97.714q-51.143-35.428-114-35.428-40.857 0-78.143 15.857t-64.285 42.857-42.857 64.286-15.857 78.143 15.857 78.143 42.857 64.286 64.285 42.857 78.143 15.857 78.143-15.857 64.286-42.857 42.857-64.286 15.857-78.143q0-62.857-35.428-114l98-98q10.572-10.572 10.572-25.714z" horiz-adv-x="476" /> -<glyph unicode="" d="M477.428 318.286q0-11.428-8-19.428l-245.714-245.714q-8-8-19.428-8t-19.428 8l-142.286 142.286q-8 8-8 19.428t8 19.428l38.857 38.857q8 8 19.428 8t19.428-8l84-84.286 187.429 187.714q8 8 19.428 8t19.428-8l38.857-38.857q8-8 8-19.429z" /> -<glyph unicode="" d="M370.857 102.286q0-11.428-8-19.428l-38.857-38.857q-8-8-19.428-8t-19.428 8l-84 84-84-84q-8-8-19.428-8t-19.428 8l-38.857 38.857q-8 8-8 19.428t8 19.428l84 84-84 84q-8 8-8 19.428t8 19.428l38.857 38.857q8 8 19.428 8t19.428-8l84-84 84 84q8 8 19.428 8t19.428-8l38.857-38.857q8-8 8-19.428t-8-19.428l-84-84 84-84q8-8 8-19.428z" horiz-adv-x="403" /> -<glyph unicode="" d="M438.857 224q0-44.572-17.428-85.143t-46.857-70-70-46.857-85.143-17.428-85.143 17.428-70 46.857-46.857 70-17.428 85.143q0 52 23 98t64.715 77.143q12.285 9.143 27.285 7.143t23.857-14.286q9.143-12 7-27t-14.143-24.143q-28-21.143-43.285-51.714t-15.285-65.143q0-29.715 11.572-56.715t31.285-46.714 46.715-31.286 56.714-11.572 56.714 11.572 46.714 31.286 31.286 46.714 11.572 56.714q0 34.572-15.286 65.143t-43.286 51.714q-12 9.143-14.143 24.143t7 27q8.857 12.286 24 14.286t27.143-7.143q41.714-31.143 64.714-77.143t23-98zM256 443.428v-182.857q0-14.857-10.857-25.714t-25.715-10.857-25.714 10.857-10.857 25.714v182.857q0 14.857 10.857 25.715t25.714 10.857 25.714-10.857 10.857-25.715z" horiz-adv-x="439" /> -<glyph unicode="" d="M292.572 224q0 30.286-21.428 51.714t-51.714 21.428-51.714-21.428-21.428-51.714 21.428-51.714 51.714-21.428 51.714 21.428 21.428 51.714zM438.857 255.143v-63.429q0-3.428-2.286-6.572t-5.714-3.714l-52.857-8q-5.428-15.428-11.143-26 10-14.286 30.572-39.428 2.857-3.428 2.857-7.143t-2.572-6.572q-7.714-10.572-28.286-30.857t-26.857-20.286q-3.428 0-7.428 2.572l-39.428 30.857q-12.572-6.572-26-10.857-4.572-38.857-8.286-53.143-2-8-10.286-8h-63.428q-4 0-7 2.428t-3.286 6.143l-8 52.572q-14 4.572-25.714 10.572l-40.285-30.572q-2.857-2.572-7.143-2.572-4 0-7.143 3.143-36 32.572-47.143 48-2 2.857-2 6.572 0 3.428 2.285 6.572 4.285 6 14.572 19t15.428 20.143q-7.715 14.286-11.715 28.286l-52.285 7.714q-3.715 0.572-6 3.572t-2.285 6.714v63.428q0 3.429 2.285 6.572t5.428 3.714l53.143 8q4 13.143 11.143 26.286-11.428 16.286-30.572 39.428-2.857 3.429-2.857 6.857 0 2.857 2.572 6.571 7.428 10.286 28.143 30.714t27 20.429q3.715 0 7.428-2.857l39.428-30.572q12.572 6.572 26 10.857 4.572 38.857 8.286 53.143 2 8 10.286 8h63.428q4 0 7-2.428t3.286-6.143l8-52.572q14-4.572 25.714-10.572l40.572 30.572q2.572 2.572 6.857 2.572 3.714 0 7.143-2.857 36.857-34 47.143-48.572 2-2.285 2-6.285 0-3.429-2.286-6.572-4.286-6-14.572-19t-15.428-20.143q7.428-14.285 11.714-28l52.286-8q3.714-0.571 6-3.571t2.286-6.714z" horiz-adv-x="439" /> -<glyph unicode="" d="M146.286 269.714v-164.571q0-4-2.571-6.572t-6.571-2.572h-18.285q-4 0-6.572 2.572t-2.572 6.572v164.572q0 4 2.572 6.571t6.572 2.571h18.285q4 0 6.572-2.571t2.571-6.572zM219.429 269.714v-164.571q0-4-2.571-6.572t-6.572-2.572h-18.286q-4 0-6.572 2.572t-2.571 6.572v164.572q0 4 2.571 6.571t6.572 2.571h18.286q4 0 6.572-2.571t2.571-6.572zM292.572 269.714v-164.571q0-4-2.572-6.572t-6.572-2.572h-18.286q-4 0-6.572 2.572t-2.571 6.572v164.572q0 4 2.571 6.571t6.572 2.571h18.286q4 0 6.572-2.571t2.572-6.572zM329.143 62.857v270.857h-256v-270.857q0-6.286 2-11.572t4.143-7.714 3-2.428h237.715q0.857 0 3 2.428t4.143 7.714 2 11.572zM137.143 370.286h128l-13.714 33.428q-2 2.572-4.857 3.143h-90.571q-2.857-0.571-4.857-3.143zM402.286 361.143v-18.286q0-4-2.572-6.572t-6.572-2.571h-27.428v-270.857q0-23.714-13.428-41t-32.286-17.286h-237.714q-18.857 0-32.285 16.714t-13.428 40.428v272h-27.428q-4 0-6.572 2.572t-2.571 6.571v18.286q0 4 2.571 6.572t6.572 2.571h88.285l20 47.714q4.285 10.572 15.429 18t22.572 7.429h91.428q11.428 0 22.572-7.429t15.428-18l20-47.714h88.286q4 0 6.572-2.571t2.572-6.572z" horiz-adv-x="403" /> -<glyph unicode="" d="M310.857 214.857v-18.286q0-3.714-2.714-6.428t-6.428-2.714h-109.714q-3.714 0-6.428 2.714t-2.714 6.428v128q0 3.714 2.714 6.428t6.428 2.714h18.286q3.714 0 6.428-2.714t2.714-6.428v-100.572h82.286q3.714 0 6.428-2.714t2.714-6.428zM365.714 224q0 29.714-11.572 56.714t-31.286 46.714-46.714 31.286-56.714 11.571-56.714-11.571-46.715-31.286-31.285-46.714-11.572-56.714 11.572-56.714 31.285-46.714 46.715-31.286 56.714-11.572 56.714 11.572 46.714 31.286 31.286 46.714 11.572 56.714zM438.857 224q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" /> -<glyph unicode="" d="M431.714 178.286q0-1.428-0.286-2-18.286-76.572-76.572-124.143t-136.571-47.572q-41.715 0-80.715 15.714t-69.572 44.857l-36.857-36.857q-5.428-5.428-12.857-5.428t-12.857 5.428-5.428 12.857v128q0 7.428 5.428 12.857t12.857 5.428h128q7.428 0 12.857-5.428t5.429-12.857-5.428-12.857l-39.143-39.143q20.285-18.857 46-29.143t53.429-10.286q38.286 0 71.428 18.572t53.143 51.143q3.143 4.857 15.143 33.428 2.286 6.572 8.572 6.572h54.857q3.714 0 6.428-2.714t2.714-6.428zM438.857 406.857v-128q0-7.428-5.428-12.857t-12.857-5.428h-128q-7.428 0-12.857 5.428t-5.428 12.857 5.428 12.857l39.428 39.428q-42.286 39.143-99.714 39.143-38.286 0-71.428-18.571t-53.143-51.143q-3.143-4.857-15.143-33.429-2.285-6.572-8.572-6.572h-56.857q-3.715 0-6.428 2.714t-2.715 6.428v2q18.572 76.572 77.143 124.143t137.143 47.571q41.714 0 81.143-15.857t70-44.714l37.143 36.857q5.428 5.428 12.857 5.428t12.857-5.428 5.428-12.857z" horiz-adv-x="439" /> -<glyph unicode="" d="M201.143 187.428q0 15.143-10.714 25.857t-25.857 10.714-25.857-10.714-10.714-25.857q0-10.572 5.429-19.143t14.572-13.428l-19.714-65.428q-1.428-4.286 1.429-8t7.429-3.714h54.857q4.571 0 7.429 3.714t1.429 8l-19.715 65.428q9.143 4.857 14.572 13.428t5.428 19.143zM91.428 260.572h146.286v54.857q0 30.286-21.428 51.714t-51.714 21.429-51.715-21.429-21.428-51.714v-54.857zM329.143 233.143v-164.571q0-11.428-8-19.428t-19.428-8h-274.286q-11.428 0-19.428 8t-8 19.428v164.571q0 11.429 8 19.429t19.428 8h9.143v54.857q0 52.572 37.715 90.286t90.285 37.714 90.285-37.714 37.714-90.286v-54.857h9.143q11.428 0 19.428-8t8-19.428z" horiz-adv-x="329" /> -<glyph unicode="" d="M332.572 443.428q6.572 0 12.572-2.572 9.428-3.714 15-11.714t5.572-17.714v-368.286q0-9.714-5.572-17.714t-15-11.714q-5.428-2.286-12.572-2.286-13.714 0-23.714 9.143l-126 121.143-126-121.143q-10.285-9.428-23.715-9.428-6.572 0-12.572 2.572-9.428 3.714-15 11.714t-5.572 17.714v368.286q0 9.714 5.572 17.714t15 11.715q6 2.571 12.572 2.571h299.428z" horiz-adv-x="366" /> -<glyph unicode="" d="M292.572 86.857v18.286q0 4-2.572 6.572t-6.572 2.572h-27.428v137.143q0 4-2.571 6.571t-6.571 2.571h-91.428q-4 0-6.572-2.571t-2.571-6.572v-18.286q0-4 2.571-6.572t6.572-2.571h27.428v-109.715h-27.428q-4 0-6.572-2.572t-2.571-6.572v-18.286q0-4 2.571-6.572t6.572-2.572h128q4 0 6.572 2.572t2.572 6.572zM256 306.286v54.857q0 4-2.571 6.571t-6.571 2.572h-54.857q-4 0-6.571-2.572t-2.571-6.571v-54.857q0-4 2.571-6.572t6.572-2.571h54.857q4 0 6.571 2.571t2.572 6.572zM438.857 224q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" /> -<glyph unicode="" d="M342 187.428h-31.143q-7.428 0-12.857 5.428t-5.428 12.857v36.572q0 7.428 5.428 12.857t12.857 5.429h31.143q-9.143 30.857-32.143 53.857t-53.857 32.143v-31.143q0-7.429-5.429-12.857t-12.857-5.428h-36.571q-7.428 0-12.857 5.428t-5.429 12.857v31.143q-30.857-9.143-53.857-32.143t-32.143-53.857h31.143q7.429 0 12.857-5.428t5.428-12.857v-36.571q0-7.428-5.428-12.857t-12.857-5.428h-31.143q9.143-30.857 32.143-53.857t53.857-32.143v31.143q0 7.428 5.428 12.857t12.857 5.428h36.571q7.428 0 12.857-5.428t5.429-12.857v-31.143q30.857 9.143 53.857 32.143t32.143 53.857zM438.857 242.286v-36.572q0-7.428-5.428-12.857t-12.857-5.428h-40.857q-10.572-46-44.143-79.572t-79.572-44.143v-40.857q0-7.428-5.428-12.857t-12.857-5.428h-36.571q-7.428 0-12.857 5.428t-5.429 12.857v40.857q-46 10.572-79.572 44.143t-44.143 79.572h-40.857q-7.428 0-12.857 5.428t-5.428 12.857v36.572q0 7.428 5.428 12.857t12.857 5.429h40.857q10.572 46 44.143 79.572t79.572 44.143v40.857q0 7.428 5.428 12.857t12.857 5.428h36.571q7.428 0 12.857-5.428t5.429-12.857v-40.857q46-10.571 79.572-44.143t44.143-79.572h40.857q7.428 0 12.857-5.428t5.428-12.857z" horiz-adv-x="439" /> -<glyph unicode="" d="M365.714 224q0 39.714-20.286 74.286l-200.286-200.286q34.572-20.286 74.286-20.286 29.714 0 56.714 11.572t46.714 31.286 31.286 46.714 11.572 56.714zM93.428 149.714l200.286 200.286q-34.572 20.286-74.286 20.286-29.714 0-56.714-11.572t-46.715-31.286-31.285-46.714-11.572-56.714q0-39.714 20.285-74.286zM438.857 224q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" /> -<glyph unicode="" d="M215.714 178.286q0-3.714-2.857-6.572l-94.857-94.857 41.143-41.143q5.429-5.428 5.429-12.857t-5.428-12.857-12.857-5.428h-128q-7.428 0-12.857 5.428t-5.428 12.857v128q0 7.428 5.428 12.857t12.857 5.428 12.857-5.428l41.143-41.143 94.857 94.857q2.857 2.857 6.572 2.857t6.572-2.857l32.572-32.572q2.857-2.857 2.857-6.572zM438.857 425.143v-128q0-7.429-5.428-12.857t-12.857-5.428-12.857 5.428l-41.143 41.143-94.857-94.857q-2.857-2.857-6.572-2.857t-6.572 2.857l-32.572 32.572q-2.857 2.857-2.857 6.572t2.857 6.572l94.857 94.857-41.143 41.143q-5.428 5.428-5.428 12.857t5.428 12.857 12.857 5.428h128q7.428 0 12.857-5.428t5.428-12.857z" horiz-adv-x="439" /> -<glyph unicode="" d="M219.429 205.714v-128q0-7.428-5.429-12.857t-12.857-5.428-12.857 5.428l-41.143 41.143-94.857-94.857q-2.857-2.857-6.572-2.857t-6.572 2.857l-32.572 32.572q-2.857 2.857-2.857 6.572t2.857 6.572l94.857 94.857-41.143 41.143q-5.428 5.428-5.428 12.857t5.428 12.857 12.857 5.428h128q7.428 0 12.857-5.428t5.429-12.857zM435.143 397.714q0-3.714-2.857-6.571l-94.857-94.857 41.143-41.143q5.428-5.429 5.428-12.857t-5.428-12.857-12.857-5.429h-128q-7.428 0-12.857 5.428t-5.429 12.857v128q0 7.429 5.428 12.857t12.857 5.428 12.857-5.428l41.143-41.143 94.857 94.857q2.857 2.857 6.572 2.857t6.572-2.857l32.572-32.572q2.857-2.857 2.857-6.572z" horiz-adv-x="439" /> -<glyph unicode="" d="M219.429 443.428q59.715 0 110.143-29.428t79.857-79.857 29.428-110.143-29.428-110.143-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428zM256 87.143v54.286q0 4-2.571 6.714t-6.286 2.714h-54.857q-3.714 0-6.572-2.857t-2.857-6.572v-54.286q0-3.714 2.857-6.572t6.572-2.857h54.857q3.714 0 6.286 2.714t2.571 6.714zM255.429 185.428l5.143 177.428q0 3.429-2.857 5.143-2.857 2.286-6.857 2.286h-62.857q-4 0-6.857-2.286-2.857-1.714-2.857-5.143l4.857-177.428q0-2.857 2.857-5t6.857-2.143h52.857q4 0 6.714 2.143t3 5z" horiz-adv-x="439" /> -<glyph unicode="" d="M292.572 87.143v54.286q0 4-2.714 6.714t-6.428 2.714h-54.857q-3.714 0-6.429-2.714t-2.714-6.714v-54.286q0-4 2.714-6.714t6.428-2.714h54.857q3.714 0 6.428 2.714t2.714 6.714zM292 194l5.143 131.143q0 3.428-2.857 5.428-3.714 3.143-6.857 3.143h-62.857q-3.143 0-6.857-3.143-2.857-2-2.857-6l4.857-130.572q0-2.857 2.857-4.714t6.857-1.857h52.857q4 0 6.714 1.857t3 4.714zM288 460.857l219.428-402.285q10-18-0.572-36-4.857-8.286-13.286-13.143t-18.143-4.857h-438.857q-9.715 0-18.143 4.857t-13.286 13.143q-10.572 18-0.572 36l219.429 402.286q4.857 8.857 13.429 14t18.572 5.143 18.572-5.143 13.428-14z" /> -<glyph unicode="" d="M438.857 96v-36.572q0-7.428-5.428-12.857t-12.857-5.428h-402.286q-7.428 0-12.857 5.428t-5.428 12.857v36.572q0 7.428 5.428 12.857t12.857 5.428h402.286q7.428 0 12.857-5.428t5.428-12.857zM438.857 242.286v-36.572q0-7.428-5.428-12.857t-12.857-5.428h-402.286q-7.428 0-12.857 5.428t-5.428 12.857v36.572q0 7.428 5.428 12.857t12.857 5.429h402.286q7.428 0 12.857-5.428t5.428-12.857zM438.857 388.572v-36.572q0-7.428-5.428-12.857t-12.857-5.429h-402.286q-7.428 0-12.857 5.428t-5.428 12.857v36.571q0 7.429 5.428 12.857t12.857 5.428h402.286q7.428 0 12.857-5.428t5.428-12.857z" horiz-adv-x="439" /> -<glyph unicode="" d="M340 314l83.714 83.714-30.572 30.572-83.714-83.714zM467.714 397.714q0-7.714-5.143-12.857l-367.428-367.428q-5.143-5.143-12.857-5.143t-12.857 5.143l-56.572 56.572q-5.143 5.143-5.143 12.857t5.143 12.857l367.428 367.428q5.143 5.143 12.857 5.143t12.857-5.143l56.572-56.572q5.143-5.143 5.143-12.857zM81.715 452l28-8.572-28-8.572-8.572-28-8.572 28-28 8.572 28 8.572 8.572 28zM181.714 405.714l56-17.143-56-17.143-17.143-56-17.143 56-56 17.143 56 17.143 17.143 56zM447.428 269.143l28-8.572-28-8.572-8.572-28-8.572 28-28 8.572 28 8.572 8.572 28zM264.572 452l28-8.572-28-8.572-8.572-28-8.572 28-28 8.572 28 8.572 8.572 28z" horiz-adv-x="476" /> -<glyph unicode="" d="M512 123.428v-91.428q0-11.428-8-19.428t-19.428-8h-91.428q-11.428 0-19.428 8t-8 19.428v91.428q0 11.428 8 19.428t19.428 8h27.428v54.857h-146.286v-54.857h27.428q11.428 0 19.428-8t8-19.428v-91.428q0-11.428-8-19.428t-19.428-8h-91.428q-11.428 0-19.428 8t-8 19.428v91.428q0 11.428 8 19.428t19.428 8h27.428v54.857h-146.286v-54.857h27.428q11.428 0 19.428-8t8-19.428v-91.428q0-11.428-8-19.428t-19.428-8h-91.428q-11.428 0-19.428 8t-8 19.428v91.428q0 11.428 8 19.428t19.428 8h27.428v54.857q0 14.857 10.857 25.714t25.715 10.857h146.286v54.857h-27.428q-11.428 0-19.428 8t-8 19.428v91.428q0 11.428 8 19.428t19.428 8h91.428q11.428 0 19.428-8t8-19.428v-91.428q0-11.428-8-19.428t-19.428-8h-27.428v-54.857h146.286q14.857 0 25.714-10.857t10.857-25.714v-54.857h27.428q11.428 0 19.428-8t8-19.428z" /> -<glyph unicode="" d="M512 141.714v-54.857q0-3.714-2.714-6.428t-6.428-2.714h-393.143v-54.857q0-3.714-2.715-6.428t-6.428-2.714q-3.428 0-6.857 2.857l-91.143 91.428q-2.571 2.572-2.571 6.286 0 4 2.571 6.572l91.428 91.428q2.572 2.572 6.572 2.572 3.715 0 6.428-2.714t2.715-6.428v-54.857h393.143q3.714 0 6.428-2.714t2.714-6.428zM512 297.143q0-4-2.572-6.572l-91.428-91.428q-2.572-2.572-6.572-2.572-3.714 0-6.428 2.714t-2.714 6.428v54.857h-393.143q-3.715 0-6.428 2.714t-2.715 6.429v54.857q0 3.714 2.715 6.428t6.428 2.714h393.143v54.857q0 4 2.572 6.571t6.572 2.572q3.428 0 6.857-2.857l91.143-91.143q2.572-2.571 2.572-6.572z" /> -<glyph unicode="" d="M109.715 96q0-7.428-5.428-12.857t-12.857-5.428-12.857 5.428-5.428 12.857 5.428 12.857 12.857 5.428 12.857-5.428 5.428-12.857zM402.286 78.572q0-34.572-20.857-54.286t-55.428-19.714h-249.714q-34.572 0-55.428 19.714t-20.857 54.286q0 19.428 1.571 37.428t6.857 39.428 13.572 37.857 23.143 29.428 34.285 17.286q-6.285-14.857-6.285-34.286v-58q-16.572-5.714-26.572-20t-10-31.714q0-22.857 16-38.857t38.857-16 38.857 16 16 38.857q0 17.428-10.143 31.714t-26.428 20v58q0 17.714 7.143 26.572 37.715-29.714 84.285-29.714t84.285 29.714q7.143-8.857 7.143-26.572v-18.286q-30.286 0-51.714-21.428t-21.428-51.714v-25.428q-9.143-8.286-9.143-20.286 0-11.428 8-19.428t19.429-8 19.428 8 8 19.428q0 12-9.143 20.286v25.428q0 14.857 10.857 25.714t25.714 10.857 25.714-10.857 10.857-25.714v-25.428q-9.143-8.286-9.143-20.286 0-11.428 8-19.428t19.428-8 19.428 8 8 19.428q0 12-9.143 20.286v25.428q0 19.428-9.857 36.428t-26.714 26.714q0 2.857 0.143 12.143t0 13.714-0.714 11.857-2 13.428-3.714 11.428q19.428-4.286 34.286-17.286t23.143-29.428 13.572-37.857 6.857-39.428 1.572-37.428zM310.857 333.714q0-45.428-32.143-77.572t-77.572-32.143-77.572 32.143-32.143 77.571 32.143 77.572 77.572 32.143 77.572-32.143 32.143-77.572z" horiz-adv-x="403" /> -<glyph unicode="" d="M365.714 224q0 29.714-11.572 56.714t-31.286 46.714-46.714 31.286-56.714 11.571-56.714-11.571-46.715-31.286-31.285-46.714-11.572-56.714 11.572-56.714 31.285-46.714 46.715-31.286 56.714-11.572 56.714 11.572 46.714 31.286 31.286 46.714 11.572 56.714zM438.857 224q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" /> -<glyph unicode="" d="M141.714 96q0-17.143-12.143-29.143t-29-12q-17.143 0-29.143 12t-12 29.143 12 29.143 29.143 12q16.857 0 29-12t12.143-29.143zM265.143 41.143q0-15.143-10.714-25.857t-25.857-10.714-25.857 10.714-10.714 25.857 10.714 25.857 25.857 10.714 25.857-10.714 10.714-25.857zM91.428 224q0-18.857-13.428-32.286t-32.285-13.428-32.285 13.428-13.428 32.286 13.428 32.286 32.285 13.428 32.285-13.428 13.428-32.286zM388.572 96q0-13.143-9.428-22.572t-22.572-9.428-22.572 9.428-9.428 22.572 9.428 22.572 22.572 9.428 22.572-9.428 9.428-22.572zM150.857 352q0-20.857-14.714-35.572t-35.572-14.714-35.572 14.714-14.715 35.572 14.715 35.572 35.572 14.714 35.572-14.714 14.714-35.572zM283.428 406.857q0-22.857-16-38.857t-38.857-16-38.857 16-16 38.857 16 38.857 38.857 16 38.857-16 16-38.857zM438.857 224q0-11.428-8-19.428t-19.428-8-19.428 8-8 19.428 8 19.428 19.428 8 19.428-8 8-19.428zM379.428 352q0-9.428-6.714-16.143t-16.143-6.714-16.143 6.714-6.714 16.143 6.714 16.143 16.143 6.714 16.143-6.714 6.714-16.143z" horiz-adv-x="448" /> -<glyph unicode="" d="M438.857 224q0-59.714-29.428-110.143t-79.857-79.857-110.143-29.428-110.143 29.428-79.857 79.857-29.428 110.143 29.428 110.143 79.857 79.857 110.143 29.428 110.143-29.428 79.857-79.857 29.428-110.143z" horiz-adv-x="439" /> -</font></defs></svg>
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/debug/fonts/font.ttf b/WebContent/VAADIN/themes/base/debug/fonts/font.ttf Binary files differdeleted file mode 100755 index eee808e07e..0000000000 --- a/WebContent/VAADIN/themes/base/debug/fonts/font.ttf +++ /dev/null diff --git a/WebContent/VAADIN/themes/base/debug/fonts/font.woff b/WebContent/VAADIN/themes/base/debug/fonts/font.woff Binary files differdeleted file mode 100755 index 2cd069ffdf..0000000000 --- a/WebContent/VAADIN/themes/base/debug/fonts/font.woff +++ /dev/null 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 d984717773..f714e4d64d 100644 --- a/WebContent/license.html +++ b/WebContent/license.html @@ -99,7 +99,7 @@ <!-- In vaadin-shared-deps --> <tr> <td>JSON</td> - <td><a href="licenses/apache-license-version-2-0.txt">Apache License, Version 2.0</a></td> + <td><a href="licenses/the-json-license.txt">The JSON License</a></td> </tr> <!-- Used by vaadin-server --> @@ -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> + <!-- 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> - <!-- The extracted vaadin-sass-compiler --> + <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 f3bd38af89..3fa008f3f3 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,8 +91,7 @@ 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> @@ -104,47 +101,30 @@ </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> + <li>Reverted to use JSON.org implementation of the JSON library instead of the Android implementation that was used in Vaadin 7.2. + See <a href="licenses/the-json-license.txt">the-json-license.txt</a> for information about its license.</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>) @@ -153,10 +133,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>) |
