summaryrefslogtreecommitdiffstats
path: root/WebContent/VAADIN/themes/valo/shared
diff options
context:
space:
mode:
Diffstat (limited to 'WebContent/VAADIN/themes/valo/shared')
-rw-r--r--WebContent/VAADIN/themes/valo/shared/_contextmenu.scss15
-rw-r--r--WebContent/VAADIN/themes/valo/shared/_global.scss361
-rw-r--r--WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss116
-rw-r--r--WebContent/VAADIN/themes/valo/shared/_notification.scss297
-rw-r--r--WebContent/VAADIN/themes/valo/shared/_overlay.scss214
-rw-r--r--WebContent/VAADIN/themes/valo/shared/_tooltip.scss67
-rw-r--r--WebContent/VAADIN/themes/valo/shared/_variables.scss140
-rw-r--r--WebContent/VAADIN/themes/valo/shared/img/spinner.gifbin0 -> 21836 bytes
8 files changed, 1210 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss
new file mode 100644
index 0000000000..7ace0ddb6c
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss
@@ -0,0 +1,15 @@
+@mixin v-valo-contextmenu {
+
+ .v-contextmenu {
+ @include v-valo-selection-overlay-style;
+ }
+
+ .v-contextmenu .gwt-MenuItem {
+ @include v-valo-selection-item-style;
+ }
+
+ .v-contextmenu .gwt-MenuItem-selected {
+ @include v-valo-selection-item-selected-style;
+ }
+
+} \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss
new file mode 100644
index 0000000000..f3de32acdd
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/_global.scss
@@ -0,0 +1,361 @@
+@import "loading-indicator";
+@import "contextmenu";
+@import "overlay";
+@import "notification";
+@import "tooltip";
+
+
+// Include global styles only once
+$v-valo-global-included: false !default;
+@mixin v-valo-global {
+ @if $v-valo-global-included == false {
+
+ // Core widget styles come before any other component (and are always included),
+ // so that it has the least specificity
+ @include v-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);
+ }
+
+ .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;
+ // Fix extra whitespace in IE
+ line-height: 0;
+ }
+
+ .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,
+ .v-errorindicator,
+ .v-required-field-indicator {
+ display: inline-block;
+ line-height: inherit;
+ }
+
+ .v-caption,
+ .v-captiontext {
+ display: inline-block;
+ line-height: $v-line-height;
+ }
+
+ // Component global styles should also be included here
+ @include v-valo-orderedlayout-global;
+ @include v-valo-gridlayout-global;
+ @include v-valo-calendar-global;
+ @include v-valo-colorpicker-global;
+ @include v-valo-table-global;
+ @include v-valo-tabsheet-global;
+
+ $v-valo-global-included: true;
+ }
+}
+
+
+
+$v-valo-shared-pathPrefix: null;
+
+@if $v-relative-paths == false {
+ $v-valo-shared-pathPrefix: "../valo/shared/";
+}
+
+
+@mixin v-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 v-valo-common {
+
+ //@if & != null {
+ // &,
+ // &.v-app-loading {
+ // @include v-valo-app-style;
+ // }
+ //} @else {
+ &.v-app,
+ &.v-app-loading {
+ @include v-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($v-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 v-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($v-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;
+ }
+
+ //.v-captiontext,
+ //.v-errorindicator,
+ //.v-required-field-indicator,
+ img.v-icon {
+ vertical-align: middle;
+ }
+
+ .v-caption {
+ @include v-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 v-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 v-valo-nativeselect-select-style;
+ }
+
+ button {
+ font: inherit;
+ font-weight: 400;
+ line-height: inherit;
+ }
+
+ .v-disabled {
+ cursor: default !important;
+ }
+
+ @include v-valo-drag-element;
+
+ @include v-valo-tooltip;
+
+ @include v-valo-contextmenu;
+
+}
+
+
+
+
+@mixin v-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 v-valo-error-indicator-style {
+ color: $v-error-indicator-color;
+ font-weight: 600;
+ width: ceil($v-unit-size/2);
+ text-align: center;
+
+ &:before {
+ @include v-valo-error-indicator-icon-style;
+ }
+}
+
+@mixin v-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 v-valo-natural-page-scrolling
+// @usage
+// // Call without any parent selector somewhere in your theme
+// =v-valo-natural-page-scrolling;
+@mixin v-valo-natural-page-scrolling {
+
+ html {
+ height: auto;
+ }
+
+ .v-generated-body {
+ height: auto;
+ overflow: auto;
+ }
+
+ .v-app,
+ .v-ui.v-scrollable {
+ width: auto !important;
+ height: auto !important;
+ overflow: visible !important;
+ }
+
+ // Reposition loading indicator so that it doens't scroll with the page
+ .v-loading-indicator {
+ position: fixed !important;
+ }
+
+ .v-overlay-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ // Reposition notifications so that they don't scroll with the page
+ .v-Notification {
+ position: fixed !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..b20dc33300
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss
@@ -0,0 +1,116 @@
+// 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 v-valo-spinner ($size: 24px, $thickness: 4px, $color: null, $speed: 500ms) {
+ $color: $color or v-valo-focus-color();
+ // Make size divisible by 2, so that the rotation won't jiggle
+ $size: $size + $size%2;
+ height: $size !important;
+ width: $size !important;
+ @include box-sizing(border-box);
+ border: $thickness solid transparentize($color, .8);
+ border-top-color: transparentize($color, .15);
+ border-radius: 100%;
+ @include animation(v-rotate-360 $speed infinite linear);
+ pointer-events: none;
+ @include transition(all ease-in-out 300ms);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@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%; }
+ 100% { width: 96%; }
+}
+
+@include keyframes(v-progress-wait-pulse) {
+ 0% { opacity: 1; }
+ 50% { opacity: .1; }
+ 100% { opacity: 1; }
+}
+
+
+$v-loading-indicator-color: v-valo-focus-color() !default;
+$v-loading-indicator-bar-height: ceil($v-unit-size/7) !default;
+
+@mixin v-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);
+ }
+
+} \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/shared/_notification.scss b/WebContent/VAADIN/themes/valo/shared/_notification.scss
new file mode 100644
index 0000000000..c546a16225
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/_notification.scss
@@ -0,0 +1,297 @@
+@mixin v-valo-notification {
+
+
+
+
+ // Positional offsets
+
+ // Can't match to "top: 0", since that would target "margin-top: 0" also, which all GWT PopupPanels have always
+ .v-Notification[style*=" top: 0"] {
+ margin-top: $v-layout-spacing-vertical !important;
+ }
+
+ .v-Notification[style*="right: 0"] {
+ margin-right: $v-layout-spacing-horizontal;
+ }
+
+ .v-Notification[style*="bottom: 0"] {
+ margin-bottom: $v-layout-spacing-vertical;
+ }
+
+ // Can't match to "left: 0", since that would target "margin-left: 0" also, which all GWT PopupPanels have always
+ .v-Notification[style*=" left: 0"] {
+ margin-left: $v-layout-spacing-horizontal !important;
+ }
+
+
+
+
+ // Custom animations for positions
+ // Left/right positions override top & bottom
+
+ // Can't match to "top: 0", since that would target "margin-top: 0" also, which all GWT PopupPanels have always
+ @if $v-animations-enabled {
+ .v-Notification[style*=" top: 0"] {
+ @include v-valo-anim-slide-down(600ms);
+ }
+
+ .v-Notification[style*="bottom: 0"] {
+ @include v-valo-anim-slide-up(600ms);
+ }
+
+ .v-Notification[style*="right: 0"] {
+ @include v-valo-anim-slide-left(600ms);
+ }
+
+ // Can't match to "left: 0", since that would target "margin-left: 0" also, which all GWT PopupPanels have always
+ .v-Notification[style*=" left: 0"]:not(.v-Notification-system) {
+ @include v-valo-anim-slide-right(600ms);
+ }
+ }
+
+
+
+
+
+ // Default style (a.k.a. humanized)
+
+ .v-Notification {
+ 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;
+ }
+
+ h1 ~ p {
+ margin-left: round($v-font-size * 1.5);
+ }
+
+ .v-icon + h1 {
+ margin-left: round($v-font-size);
+ }
+
+ @include v-valo-notification-style;
+
+ @if $v-animations-enabled {
+ @include v-valo-anim-fade-in;
+ }
+
+ }
+
+
+ // System notification
+
+ .v-Notification-system {
+ left: 0 !important;
+ right: 0;
+ max-width: 100%;
+ margin: 0 !important;
+ border-radius: 0;
+
+ @include v-valo-notification-system-style;
+ }
+
+ // Needs a more specific selector to override positional margins
+ .v-Notification-system.v-Notification-system {
+ margin: 0 !important;
+ }
+
+
+
+
+ // Tray notification
+
+ .v-Notification.tray {
+ text-align: left;
+ h1 {
+ //display: block;
+ }
+
+ h1 + p {
+ display: block;
+ margin: .5em 0 0;
+ }
+ @include v-valo-notification-tray-style;
+ }
+
+ .v-Notification.warning {
+ @include v-valo-notification-warning-style;
+ }
+
+ .v-Notification.error {
+ @include v-valo-notification-error-style;
+ }
+
+ .v-Notification.closable {
+ @include v-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;
+ }
+ }
+
+}
+
+
+
+
+
+
+@mixin v-valo-notification-closable-style {
+ padding-right: $v-unit-size + round($v-unit-size/1.7);
+ overflow: hidden !important; // Override GWT PopupPanel
+ cursor: pointer;
+
+ //&:before {
+ // content: "";
+ // position: absolute;
+ // top: 0;
+ // right: 0;
+ // bottom: 0;
+ // width: $v-unit-size;
+ // cursor: pointer;
+ // background: #000;
+ // @include opacity(.15);
+ //}
+
+ &: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: $v-border-width 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 v-valo-notification-style {
+ background: v-valo-overlay-background-color();
+ box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.15);
+ padding: round($v-unit-size/2) round($v-unit-size/1.7);
+
+ // Make thigns easier to read
+ &[style*="opacity: 0.9;"] {
+ @include opacity(1, true);
+ }
+
+ h1 {
+ color: v-valo-focus-color();
+ font-size: round($v-font-size * 1.2);
+ line-height: 1;
+ }
+ p {
+ line-height: 1.4;
+ }
+}
+
+@mixin v-valo-notification-system-style {
+ background-color: #444;
+ font-weight: $v-font-weight + 100;
+ line-height: round($v-font-size * 1.4);
+ box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25);
+
+ h1 {
+ color: #fff;
+ vertical-align: middle;
+ }
+
+ p {
+ color: #e6e6e6;
+ max-width: 50em;
+ }
+
+ // No need to underline the "click here" text, let's imply that the whole banner is clickable
+ u {
+ text-decoration: none;
+ }
+}
+
+
+@mixin v-valo-notification-tray-style {}
+
+@mixin v-valo-notification-warning-style {
+ background: #FFF3D2;
+
+ h1 {
+ color: #AC7C00;
+ }
+
+ p {
+ color: #9D874D;
+ }
+}
+
+@mixin v-valo-notification-error-style {
+ background: $v-error-indicator-color;
+ font-weight: $v-font-weight + 100;
+ box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25);
+
+ h1 {
+ color: v-valo-font-color($v-error-indicator-color, 1);
+ }
+
+ p {
+ color: v-valo-font-color($v-error-indicator-color, .8);
+ }
+}
diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
new file mode 100644
index 0000000000..87adb4dffd
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
@@ -0,0 +1,214 @@
+$v-overlay-border-radius: $v-border-radius !default;
+$v-overlay-border-width: $v-border-width !default;
+$v-overlay-open-animation: v-valo-overlay-open 200ms !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-style: 0 2px 4px 0 shade, 0 3px 5px 0 shade !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);
+
+
+@function v-valo-overlay-background-color ($context: $v-app-background-color) {
+ @if is-dark-color($context) {
+ @return darken($context, 2%);
+ }
+ @return lighten($context, 2%);
+}
+
+
+
+
+
+
+@mixin v-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-color: last($shadow);
+ $shadow-color-opacity: opacity($shadow-color);
+ $shadow-color: opacify($shadow-color, 1);
+
+ position: absolute;
+ top: $shadow-offset-y - $shadow-blur;
+ right: -$shadow-offset-x + $shadow-blur;
+ bottom: -$shadow-offset-y + $shadow-blur;
+ left: $shadow-offset-x - $shadow-blur;
+ background: $shadow-color;
+ filter: progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=true, ShadowOpacity=#{$shadow-color-opacity});
+ }
+}
+
+
+
+
+
+// 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;
+
+ // Border simulation
+ .center {
+ position: absolute;
+ top: -$v-overlay-border-width;
+ right: -$v-overlay-border-width;
+ bottom: -$v-overlay-border-width;
+ left: -$v-overlay-border-width;
+ background: darken(v-valo-overlay-background-color(), $v-bevel-depth);
+ filter: alpha(opacity=round($v-bevel-depth/1%));
+ }
+
+ // Up to 8 shadows are supported
+ $elements: top, top-left, top-right, left, right, bottom, bottom-left, bottom-right;
+ $shadows: v-valo-shadow($shadow-style: $v-overlay-shadow-style);
+
+ @if type-of(last($shadows)) == color {
+ @include v-valo-ie8-shadow($shadows);
+ } @else {
+ @for $i from 1 through min(length($elements), length($shadows)) {
+ $shadow: nth($shadows, $i);
+ @if length($shadow) == 2 {
+ $shadow: last($shadow); // Workaround for a weird issue when sometimes a shadow is appended to a null list
+ }
+ @if length($shadow) > 3 {
+ @include v-valo-ie8-shadow($shadow: $shadow, $element: nth($elements, $i));
+ }
+ }
+ }
+ }
+}
+
+
+
+
+
+
+@function v-valo-overlay-box-shadow ($bg: null) {
+ $bg: $bg or v-valo-overlay-background-color();
+ @return v-valo-shadow($shadow-style: (0 0 0 $v-overlay-border-width rgba(darken($bg, $v-bevel-depth), $v-bevel-depth/100%), $v-overlay-shadow-style));
+}
+
+
+
+@mixin v-valo-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) {
+ padding: $v-overlay-padding-vertical $v-overlay-padding-horizontal;
+ border-radius: $v-overlay-border-radius;
+
+ $bg: $background-color or v-valo-overlay-background-color();
+ background: $bg;
+ color: v-valo-font-color($bg);
+
+ box-shadow: v-valo-overlay-box-shadow($bg);
+
+ @if $v-animations-enabled and $v-overlay-open-animation {
+ @include animation($open-animation);
+ }
+
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -ms-backface-visibility: hidden;
+ backface-visibility: hidden;
+}
+
+
+
+@if $v-animations-enabled {
+ @include keyframes(v-valo-overlay-open) {
+ 0% {
+ @include transform(translatey(-3px));
+ opacity: 0;
+ }
+ }
+}
+
+
+
+
+
+
+@mixin v-valo-selection-overlay-style ($background-color: null, $open-animation: $v-overlay-open-animation) {
+ @include v-valo-overlay-style($background-color: $background-color, $open-animation: $open-animation);
+ padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal;
+}
+
+
+
+
+@mixin v-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;
+ background: scale-color(v-valo-selection-color(), $lightness: -30%, $saturation: 50%);
+ @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 v-valo-selection-item-selected-style ($parent-background-color: null) {
+ $selection-color: v-valo-selection-color($parent-background-color);
+ @include v-valo-gradient($selection-color);
+ color: v-valo-font-color($selection-color, 0.9);
+}
+
+
+
+
+
+
+
+
+@mixin v-valo-drag-element {
+ .v-drag-element {
+ @include v-valo-drag-element-style;
+ }
+}
+
+@mixin v-valo-drag-element-style {
+ background: #fff;
+ 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;
+} \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/shared/_tooltip.scss b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss
new file mode 100644
index 0000000000..9074fc69a7
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/_tooltip.scss
@@ -0,0 +1,67 @@
+// @category Tooltip
+
+$v-tooltip-background-color: rgba(if(is-dark-color($v-app-background-color), scale-color($v-app-background-color, $lightness: 80%), scale-color($v-app-background-color, $lightness: -80%)), .75) !default;
+$v-tooltip-font-color: v-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 v-valo-tooltip {
+ .v-tooltip {
+ @include v-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;
+ }
+
+ .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 v-valo-tooltip-style {
+ background-color: opacify($v-tooltip-background-color, 1); // For IE8
+ background-color: $v-tooltip-background-color;
+ 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;
+
+ @if $v-animations-enabled {
+ //@include v-valo-anim-fade-in;
+ }
+}
diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss
new file mode 100644
index 0000000000..a0aabd9590
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss
@@ -0,0 +1,140 @@
+// @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.
+// @variable v-included-components
+// @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,
+ loginform,
+ menubar,
+ nativebutton,
+ nativeselect,
+ optiongroup,
+ orderedlayout,
+ panel,
+ popupview,
+ progressindicator,
+ 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 v-valo-components and v-valo-components.
+// @mixin v-is-included
+// @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
+// @variable v-app-loading-text
+// @default ""
+$v-app-loading-text: "" !default;
+
+
+// Base line height used for all widgets
+// @variable v-line-height
+// @default 1.55 !default
+$v-line-height: 1.55 !default;
+
+
+$v-app-background-color: hsl(210, 0%, 98%) !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: v-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-width: 1px !default; // Must be specified in pixels
+$v-border-radius: 4px !default; // Must be specified in pixels
+
+$v-gradient-style: linear !default;
+$v-gradient-depth: 8% !default;
+
+$v-bevel-style: inset 0 1px 0 hilite, inset 0 -1px 0 shade !default;
+$v-bevel-depth: 25% !default;
+
+$v-shadow-style: 0 2px 3px shade !default;
+$v-shadow-depth: 5% !default;
+
+$v-focus-style: 0 0 0 2px focus-color !default;
+$v-focus-color: null !default;
+
+$v-animations-enabled: true !default;
+$v-hover-styles-enabled: true !default;
+
+$v-disabled-opacity: 0.7 !default;
+
+$v-selection-color: null !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;
+
+
+
+
+$v-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
+// @private
+// @variable v-relative-paths
+// @default false
+$v-relative-paths: false !default; \ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/shared/img/spinner.gif b/WebContent/VAADIN/themes/valo/shared/img/spinner.gif
new file mode 100644
index 0000000000..acf8f1c43a
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/shared/img/spinner.gif
Binary files differ
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 19:40:13 +0000