diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo/components')
45 files changed, 5398 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/valo/components/_absolutelayout.scss b/WebContent/VAADIN/themes/valo/components/_absolutelayout.scss new file mode 100755 index 0000000000..68ab9a3cf0 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_absolutelayout.scss @@ -0,0 +1,22 @@ +@mixin v-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..6c624d0968 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_accordion.scss @@ -0,0 +1,75 @@ +$v-accordion-content-shadow-style: join(inset, $v-shadow-style) !default; +$v-accordion-content-shadow-depth: $v-shadow-depth/2 !default; + + +@mixin v-valo-accordion ($primary-stylename: v-accordion) { + .#{$primary-stylename} { + @include v-valo-panel-style; + @include v-valo-gradient($color: $v-app-background-color, $depth: $v-gradient-depth/2); + overflow: hidden; + } + + .#{$primary-stylename}-item { + position: relative; + overflow: hidden; + + @if $v-border-radius > 0 { + $_br: $v-border-radius - $v-border-width; + &:first-child { + border-radius: $_br $_br 0 0; + } + &:last-child { + border-radius: 0 0 $_br $_br; + } + } + } + + .#{$primary-stylename}-item-caption .v-caption { + @include v-valo-panel-caption-style; + display: block; + background: transparent; + border-bottom-color: v-valo-panel-border-color($background-color: v-valo-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 v-valo-button-hover-style; + border: none; + } + } + + &:active:before { + @include v-valo-button-active-style; + } + } + + .#{$primary-stylename}-item:last-child:not(.#{$primary-stylename}-item-open) .v-caption { + border-bottom: none; + } + + .#{$primary-stylename}-item-content { + position: absolute; + width: 100%; + bottom: 0; + right: 0; + box-shadow: v-valo-shadow($shadow-style: $v-accordion-content-shadow-style, $shadow-depth: $v-accordion-content-shadow-depth); + background-color: v-valo-panel-background-color(); + @include box-sizing(border-box); + @include v-valo-panel-adjust-content-margins; + } + + .#{$primary-stylename}-item-open + .#{$primary-stylename}-item { + border-top: $v-panel-border-width solid v-valo-panel-border-color($background-color: v-valo-panel-background-color()); + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_all.scss b/WebContent/VAADIN/themes/valo/components/_all.scss new file mode 100644 index 0000000000..f8db4db5d5 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_all.scss @@ -0,0 +1,212 @@ +@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"; +@import "dragwrapper"; + + +@mixin v-valo-components { + + @if v-is-included(absolutelayout) { + @include v-valo-absolutelayout; + } + + @if v-is-included(orderedlayout) { + @include v-valo-orderedlayout; + } + + @if v-is-included(button) { + @include v-valo-button; + } + + @if v-is-included(checkbox) or v-is-included(optiongroup) { + @include v-valo-checkbox; + } + + @if v-is-included(combobox) { + @include v-valo-combobox; + } + + @if v-is-included(csslayout) { + @include v-valo-csslayout; + } + + @if v-is-included(customcomponent) { + @include v-valo-customcomponent; + } + + @if v-is-included(customlayout) { + @include v-valo-customlayout; + } + + @if v-is-included(form) { + @include v-valo-form; + } + + @if v-is-included(formlayout) { + @include v-valo-formlayout; + } + + @if v-is-included(grid) { + @include v-valo-grid(v-escalator); + } + + @if v-is-included(textfield) { + @include v-valo-textfield; + } + + @if v-is-included(textarea) { + @include v-valo-textarea; + } + + @if v-is-included(datefield) { + @include v-valo-datefield; + @include v-valo-inline-datefield; + } + + @if v-is-included(orderedlayout) { + @include v-valo-orderedlayout; + } + + @if v-is-included(gridlayout) { + @include v-valo-gridlayout; + } + + @if v-is-included(menubar) { + @include v-valo-menubar; + } + + @if v-is-included(optiongroup) { + @include v-valo-optiongroup; + } + + @if v-is-included(link) { + @include v-valo-link; + } + + @if v-is-included(window) { + @include v-valo-window; + } + + @if v-is-included(tree) { + @include v-valo-tree; + } + + @if v-is-included(table) or v-is-included(treetable) { + @include v-valo-table; + } + + @if v-is-included(treetable) { + @include v-valo-treetable; + } + + @if v-is-included(splitpanel) { + @include v-valo-splitpanel; + } + + @if v-is-included(progressbar) or v-is-included(progressindicator) { + @include v-valo-progressbar; + @include v-valo-progressbar(v-progressindicator); + } + + @if v-is-included(slider) { + @include v-valo-slider; + } + + @if v-is-included(tabsheet) { + @include v-valo-tabsheet; + } + + @if v-is-included(colorpicker) { + @include v-valo-colorpicker; + } + + @if v-is-included(panel) { + @include v-valo-panel; + } + + @if v-is-included(accordion) { + @include v-valo-accordion; + } + + @if v-is-included(twincolselect) { + @include v-valo-twincolselect; + } + + @if v-is-included(nativeselect) { + @include v-valo-nativeselect; + } + + @if v-is-included(calendar) { + @include v-valo-calendar; + } + + @if v-is-included(label) { + @include v-valo-label; + } + + @if v-is-included(dragwrapper) { + @include v-valo-dragwrapper; + } + + @if v-is-included(loginform) { + @include v-valo-loginform; + } + + @if v-is-included(nativebutton) { + @include v-valo-nativebutton; + } + + @if v-is-included(nativeselect) { + @include v-valo-nativeselect; + } + + @if v-is-included(popupview) { + @include v-valo-popupview; + } + + @if v-is-included(richtextarea) { + @include v-valo-richtextarea; + } + + @if v-is-included(upload) { + @include v-valo-upload; + } + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss new file mode 100644 index 0000000000..878203b878 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_button.scss @@ -0,0 +1,262 @@ +// @category Button + +// Values default to global values (evaluated when the mixins are called) +$v-button-background-color: null !default; +$v-button-bevel-style: null !default; +$v-button-bevel-depth: null !default; +$v-button-gradient-style: null !default; +$v-button-gradient-depth: null !default; +$v-button-shadow-style: null !default; +$v-button-shadow-depth: null !default; +$v-button-border-radius: $v-border-radius !default; +$v-button-unit-size: null !default; + +$v-button-font-weight: max(400, $v-font-weight + 100) !default; +$v-button-cursor: pointer !default; +$v-button-hover-style-enabled: $v-hover-styles-enabled !default; +$v-button-border-width: $v-border-width !default; +$v-button-disabled-opacity: $v-disabled-opacity !default; + + + +// The main mixin for Valo buttons +// @mixin v-valo-button +// @param $primary-stylename {String} the primary stylename to use for the output. Defaults to <code>v-button</code> +@mixin v-valo-button ($primary-stylename: v-button) { + .#{$primary-stylename} { + @include v-valo-button-common-properties; + @include v-valo-button-style; + } +} + + + + + +@mixin v-valo-button-common-properties { + @include v-valo-tappable; + cursor: $v-button-cursor; + font-weight: $v-button-font-weight; + position: relative; + text-align: center; + white-space: nowrap; + + // Generated element for :hover, :focus and :active styles + &:after { + content: ""; + position: absolute; + top: -$v-button-border-width; + right: -$v-button-border-width; + bottom: -$v-button-border-width; + left: -$v-button-border-width; + border-radius: inherit; + border: inherit; + border-width: 0; + @if $v-animations-enabled { + @include transition(box-shadow 180ms, border 180ms); + } + } + + &.v-disabled { + @include opacity($v-button-disabled-opacity); + + &:after { + display: none; + } + } + + @include v-valo-button-vertical-centering; +} + +@mixin v-valo-button-vertical-centering { + // Vertical centering of icon and caption, independent of the height of the button + @include 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: 105%; + } + + // ...and so does IE. Who knew? + .v-ie &:before { + margin-top: 4px; + } +} + + + + + +@mixin v-valo-button-size ($unit-size, $border-radius) { + height: $unit-size; + + $padding-width: ceil($unit-size/2.4); + $padding-width: $padding-width + ceil($border-radius/3); + padding: 0 $padding-width; + + .v-icon { + margin: 0 ceil($padding-width/-5); + } + + .v-icon + span:not(:empty) { + margin-left: ceil($padding-width/1.5); + } +} + + + +@function v-valo-button-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, + $background-color: $v-button-background-color) { + + $background-color: $background-color or $v-app-background-color; + $border-color: if(color-luminance($background-color) < color-luminance($v-app-background-color), $background-color, $v-app-background-color); + $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-50%, -$bevel-depth/2))); + $border-color: scale-color($border-color, $saturation: -$bevel-depth/2); + @if contains($bevel-style, shade, true) { + $border-color: $border-color $border-color blend-multiply(transparentize(#000, max(0.8, 1-$bevel-depth/200%)), $border-color); + } + + @return $border-color; +} + + + + +@mixin v-valo-button-style ($gradient-style: $v-button-gradient-style, $gradient-depth: $v-button-gradient-depth, + $bevel-style: $v-button-bevel-style, $bevel-depth: $v-button-bevel-depth, + $unit-size: $v-button-unit-size, $border-radius: $v-button-border-radius, + $background-color: $v-button-background-color) { + + // Set up variable defaults + $background-color: $background-color or $v-app-background-color; + $gradient-style: $gradient-style or $v-gradient-style; + $gradient-depth: $gradient-depth or $v-gradient-depth; + $bevel-style: $bevel-style or $v-bevel-style; + $bevel-depth: $bevel-depth or $v-bevel-depth; + $unit-size: $unit-size or $v-unit-size; + + @include v-valo-button-size($unit-size, $border-radius); + + border-radius: $border-radius; + border: $v-button-border-width solid; + border-color: v-valo-button-border-color($bevel-style, $bevel-depth, $background-color); + + @include v-valo-gradient($background-color, $gradient-style, $gradient-depth); + color: v-valo-font-color($background-color, 0.9); + + box-shadow: v-valo-button-box-shadow($background-color, $bevel-style, $bevel-depth, $gradient-style, $gradient-depth); + text-shadow: v-valo-button-text-shadow($background-color, $bevel-depth); + + @if $v-button-hover-style-enabled { + &:hover:after { + @include v-valo-button-hover-style($background-color: $background-color); + } + } + + &:focus { + outline: none; + &:after { + @include v-valo-button-focus-style($background-color: $background-color); + } + } + + &:active:after, + &.v-pressed:after { + @include v-valo-button-active-style($background-color: $background-color); + } + +} + + +@mixin v-valo-button-focus-style ($background-color: $v-app-background-color, $border-fallback: inherit) { + $focus-color: v-valo-focus-color(); + + @if color-luminance($focus-color) + 50 < color-luminance($background-color) { + border: $v-button-border-width solid $focus-color; + } @else { + border: $border-fallback or v-valo-button-border-color($background-color: $background-color); + } + + box-shadow: v-valo-focus-box-shadow($color: $focus-color); + + @if $v-animations-enabled { + @include transition(none); + } +} + + + +@mixin v-valo-button-active-style ($background-color: $v-app-background-color) { + $bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($v-app-background-color)); + background-color: rgba($bg, .1); + + .v-ie8 & { + background-color: $bg; + filter: alpha(opacity=10); + } +} + + + +@mixin v-valo-button-hover-style ($background-color: $v-app-background-color) { + $bg: lighten($background-color, 15%); + background-color: rgba($bg, .1); + border: inherit; + + @if $v-animations-enabled { + @include transition(none); + } + + .v-ie8 & { + background-color: $bg; + filter: alpha(opacity=20); + } +} + + + + +@mixin v-valo-button-borderless-style { + border: none; + box-shadow: none; + background: transparent; + color: inherit; +} + + +@mixin v-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; + } + } +} + + + +@function v-valo-button-box-shadow($background-color, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, $gradient-style: $v-gradient-style, $gradient-depth: $v-gradient-depth) { + @return v-valo-bevel($background-color, $bevel-style, $bevel-depth, $gradient-style, $gradient-depth), v-valo-shadow(); +} + + + +@function v-valo-button-text-shadow($background-color, $bevel-depth: $v-bevel-depth) { + @if is-dark-color($background-color) { + @return 0 -1px 0 transparentize(darken($background-color, $bevel-depth), 1-($bevel-depth/100%)); + } @else { + @return 0 1px 0 transparentize(lighten($background-color, $bevel-depth), 1-($bevel-depth/100%)); + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_calendar.scss b/WebContent/VAADIN/themes/valo/components/_calendar.scss new file mode 100644 index 0000000000..6429a2f163 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_calendar.scss @@ -0,0 +1,546 @@ +$v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateblue !default; + + +@mixin v-valo-calendar-global ($primary-stylename: v-calendar) { + .#{$primary-stylename}-month-day-scrollable { + overflow-y: scroll; + } + + .#{$primary-stylename}-week-wrapper { + position: relative; + overflow: hidden; + } + + .#{$primary-stylename}-current-time { + position: absolute; + left: 0; + width: 100%; + height: 1px; + background: red; + z-index: 2; + } + + .#{$primary-stylename}-event-resizetop, + .#{$primary-stylename}-event-resizebottom { + position: absolute; + height: 5%; + min-height: 3px; + width: 100%; + z-index: 1; + } + + .#{$primary-stylename}-event-resizetop { + cursor: row-resize; + top: 0; + } + + .#{$primary-stylename}-event-resizebottom { + cursor: row-resize; + bottom: 0; + } + + + // What a truckload of magic numbers! + // TODO Try to find out what these actually do, and how to make them dissappear + + .#{$primary-stylename}-header-month td:first-child { + padding-left: 20px; + // Same as VCalendar.MONTHLY_WEEKTOOLBARWIDTH - .#{$primary-stylename}-week-numbers border + } + + .#{$primary-stylename}-week-numbers { + //border-right: 1px solid; + } + + .#{$primary-stylename}-month-sizedheight .#{$primary-stylename}-month-day { + height: 100px; + } + + .#{$primary-stylename}-month-sizedwidth .#{$primary-stylename}-month-day { + width: 100px; + } + + .#{$primary-stylename}-header-month-Hsized .#{$primary-stylename}-header-day { + width: 101px; + } + + .#{$primary-stylename}-header-month-Hsized td:first-child { + padding-left: 21px; + } + + .#{$primary-stylename}-header-day-Hsized { + width: 200px; + } + + .#{$primary-stylename}-week-numbers-Vsized .#{$primary-stylename}-week-number { + height: 100px; + line-height: 100px; + } + + .#{$primary-stylename}-week-wrapper-Vsized { + height: 400px; + overflow-x: hidden !important; + } + + .#{$primary-stylename}-times-Vsized .#{$primary-stylename}-time { + height: 38px; + } + + .#{$primary-stylename}-times-Hsized .#{$primary-stylename}-time { + width: 42px; + } + + .#{$primary-stylename}-day-times-Vsized .v-datecellslot, + .#{$primary-stylename}-day-times-Vsized .v-datecellslot-even { + height: 18px; + } + + .#{$primary-stylename}-day-times-Hsized, + .#{$primary-stylename}-day-times-Hsized .v-datecellslot, + .#{$primary-stylename}-day-times-Hsized .v-datecellslot-even { + width: 200px; + } +} + + + + + + + + +@mixin v-valo-calendar ($primary-stylename: v-calendar) { + + + .#{$primary-stylename}-header-day { + font-weight: $v-font-weight + 100; + text-align: center; + padding: round($v-unit-size/5) 0; + } + + // Prev/next week buttons + .#{$primary-stylename}-header-week .#{$primary-stylename}-back, + .#{$primary-stylename}-header-week .#{$primary-stylename}-next { + @include appearance(none); + background: transparent; + border: none; + padding: 0; + margin: 0; + cursor: pointer; + outline: none; + color: inherit; + @include opacity(.5); + + &:focus { + outline: none; + } + + &:hover { + @include opacity(1); + } + + &:active { + @include opacity(.5); + } + } + + .#{$primary-stylename}-header-week .#{$primary-stylename}-back { + @include v-valo-calendar-prev-style; + } + + .#{$primary-stylename}-header-week .#{$primary-stylename}-next { + @include v-valo-calendar-next-style; + } + + + + + + + + + // Month grid + + .#{$primary-stylename}-month { + outline: none; + overflow: hidden; + + td { + vertical-align: top; + } + } + + .#{$primary-stylename}-week-number { + cursor: pointer; + width: 20px; // Same as VCalendar.MONTHLY_WEEKTOOLBARWIDTH + text-align: center; + font-size: 0.8em; + @include opacity(.5); + + &:hover { + @include opacity(1); + } + } + + .#{$primary-stylename}-month-day { + outline: none; + @include box-sizing(border-box); + line-height: 1.2; + } + + .#{$primary-stylename}-month tr:not(:first-child) .#{$primary-stylename}-month-day { + //width: auto !important; + } + + .#{$primary-stylename}-bottom-spacer, + .#{$primary-stylename}-spacer, + .#{$primary-stylename}-bottom-spacer-empty { + height: round($v-font-size * 1.2); + margin-bottom: round($v-unit-size/12); + } + + .#{$primary-stylename}-bottom-spacer { + font-size: 0.8em; + padding: 0 round($v-unit-size/8); + cursor: pointer; + + &:hover { + color: v-valo-focus-color(); + } + } + + .#{$primary-stylename}-day-number { + line-height: round($v-unit-size/1.5); + font-size: $v-font-size; + text-align: right; + margin: 0 round($v-unit-size/8); + white-space: nowrap; + border-top: 1px solid darken($v-app-background-color, 3%); + cursor: pointer; + + &:hover { + color: v-valo-focus-color(); + } + } + + .#{$primary-stylename}-month-day-today { + background: blend-normal(rgba(v-valo-focus-color(), .05), $v-app-background-color); + + .#{$primary-stylename}-day-number { + font-weight: $v-font-weight + 100; + color: v-valo-focus-color(); + border-top: 2px solid v-valo-focus-color(); + line-height: round($v-unit-size/1.5) - 1px; + margin: 0; + padding: 0 round($v-unit-size/8); + } + } + + .#{$primary-stylename}-month-day-selected { + background-color: blend-normal(rgba(v-valo-selection-color(), .1), $v-app-background-color); + } + + .#{$primary-stylename}-month-day-dragemphasis { + background-color: #a8a8a8; + } + + .#{$primary-stylename}-month-day-scrollable { + overflow-y: scroll; + } + + + + + + + + + + + + // Week/day view + + $_times-column-width: 50px; // Seems to be a fixed number + + .#{$primary-stylename}-weekly-longevents { + margin-left: $_times-column-width; // Seems to be a fixed number + border-bottom: round($v-unit-size/12) solid darken($v-app-background-color, 10%); + + .#{$primary-stylename}-event-all-day { + height: round($v-font-size * 0.85 * 1.6); + line-height: 1.6; + margin-bottom: round($v-unit-size/12); + } + } + + .#{$primary-stylename}-header-week td { + vertical-align: middle !important; + + //&:first-child { + // width: round($v-unit-size*1.5); + //} + } + + .#{$primary-stylename}-header-week .#{$primary-stylename}-header-day { + cursor: pointer; + } + + .#{$primary-stylename}-times { + width: $_times-column-width; + font-size: 0.77em; + line-height: 1; + white-space: nowrap; + } + + .#{$primary-stylename}-time { + text-align: right; + padding-right: round($v-unit-size/4); + margin-top: round($v-font-size*0.8/-2); + padding-bottom: round($v-font-size*0.8/2); + } + + .#{$primary-stylename}-day-times, + .#{$primary-stylename}-day-times-today { + outline: none; + //@include box-sizing(border-box); + //padding: 0 round($v-unit-size/8); + border-right: 1px solid transparent; + + &:focus { + outline: none; + } + } + + $v-valo-calendar-time-divider-color: darken($v-app-background-color, 5%); + + .#{$primary-stylename} .v-datecellslot, + .#{$primary-stylename} .v-datecellslot-even { + border-top: 1px solid $v-valo-calendar-time-divider-color; + + &:first-child { + border-top-color: transparent; + } + } + + .#{$primary-stylename} .v-datecellslot { + border-top-style: dotted; + } + + .#{$primary-stylename} .v-datecellslot, + .#{$primary-stylename} .v-datecellslot-even { + margin-right: round($v-unit-size/8); + } + + .#{$primary-stylename}-current-time { + background: v-valo-focus-color(); + line-height: 1px; + pointer-events: none; + @include opacity(.5); + + &:before { + content: "\2022"; + color: v-valo-focus-color(); + font-size: 22px; + margin-left: -0.07em; + } + } + + .#{$primary-stylename} .v-daterange { + position: relative; + + &:before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: -1px; + left: 0; + background: v-valo-selection-color(); + @include opacity(.5); + @if $v-border-radius > 0 { + border-radius: $v-border-radius $v-border-radius 0 0; + } + } + + + .v-daterange { + border-color: transparent; + + &:before { + @if $v-border-radius > 0 { + border-radius: 0; + } + } + } + } + + + + + // Event styles + + .#{$primary-stylename}-event { + font-size: 0.85em; + overflow: hidden; + cursor: pointer; + outline: none; + border-radius: $v-border-radius; + + &:focus { + outline: none; + } + } + + .#{$primary-stylename}-event-month { + padding: 0 round($v-unit-size/8); + @include box-sizing(border-box); + margin-bottom: round($v-unit-size/12); + white-space: nowrap; + text-overflow: ellipsis; + height: round($v-font-size * 1.2); + line-height: round($v-font-size * 1.2); + + .#{$primary-stylename}-event-time { + float: right; + font-size: 0.9em; + line-height: round($v-font-size * 1.2); + @include opacity(.5); + } + + &:before { + content: "\25cf"; + margin-right: .2em; + } + } + + .#{$primary-stylename}-event-all-day { + padding: 0 round($v-unit-size/8); + @include box-sizing(border-box); + height: round($v-font-size * 1.2); + line-height: round($v-font-size * 1.2); + border-radius: 0; + margin-left: -1px; + white-space: nowrap; + + &:before { + content: ""; + } + } + + .#{$primary-stylename}-event-start { + overflow: visible; + margin-left: 0; + + &.#{$primary-stylename}-event-continued-to, + &.#{$primary-stylename}-event-end { + overflow: hidden; + text-overflow: ellipsis; + } + } + + @if $v-border-radius > 0 { + .#{$primary-stylename}-event-start { + border-top-left-radius: $v-border-radius; + border-bottom-left-radius: $v-border-radius; + margin-left: round($v-unit-size/8); + } + .#{$primary-stylename}-event-end { + border-top-right-radius: $v-border-radius; + border-bottom-right-radius: $v-border-radius; + margin-right: round($v-unit-size/8); + } + } + + .#{$primary-stylename}-event-caption { + font-weight: $v-font-weight + 200; + line-height: 1.2; + padding: round($v-unit-size/8) 0; + position: absolute; + overflow: hidden; + right: round($v-unit-size/4); + left: round($v-unit-size/8); + bottom: 0; + top: 0; + + span { + font-weight: $v-font-weight; + white-space: nowrap; + } + } + + .#{$primary-stylename}-week-wrapper .#{$primary-stylename}-event { + overflow: visible; + + // Event is being dragged + &[style*=" left:"] .#{$primary-stylename}-event-content { + //box-shadow: v-valo-shadow(); + } + } + + .#{$primary-stylename}-week-wrapper .#{$primary-stylename}-event-caption { + + } + + .#{$primary-stylename}-week-wrapper .#{$primary-stylename}-event-content { + margin-top: -1px; + border-radius: $v-border-radius + 1px; + border: 1px solid $v-app-background-color; + padding-top: 3px; + margin-right: round($v-unit-size/8); + //margin-left: round($v-unit-size/8); + } + + + + + + + + // Custom event colors + + @for $i from 1 through length($v-calendar-event-colors) { + $color: nth($v-calendar-event-colors, $i); + $bg: blend-normal(rgba($color, .2), $v-app-background-color); + + // First color is considered the default color (and stylename 'color1' will equal to that) + $stylename: if($i == 1, '', '[class*="color#{$i}"]'); + + .#{$primary-stylename}-event-month#{$stylename}:before { + color: $color; + } + + .#{$primary-stylename}-event-all-day#{$stylename} { + background-color: $bg; + background-color: rgba($bg, .8); + color: $color; + } + + .#{$primary-stylename}-week-wrapper .#{$primary-stylename}-event#{$stylename} { + color: $color; + + .#{$primary-stylename}-event-content { + background-color: $bg; + background-color: rgba($bg, .8); + } + } + } + + + + .#{$primary-stylename}.v-disabled * { + cursor: default; + } + +} + + +@mixin v-valo-calendar-prev-style { + &:before { + @include v-valo-tabsheet-scroller-prev-icon-style; + } +} + +@mixin v-valo-calendar-next-style { + &:before { + @include v-valo-tabsheet-scroller-next-icon-style; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss new file mode 100644 index 0000000000..1fc34dd823 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss @@ -0,0 +1,105 @@ +@mixin v-valo-checkbox ($primary-stylename: v-checkbox) { + + .#{$primary-stylename}, + .v-radiobutton { + @include v-valo-checkbox-style; + } + +} + + +@mixin v-valo-checkbox-icon-style { + content: "\f00c"; + font-family: FontAwesome; +} + + +@mixin v-valo-checkbox-style ($background-color: $v-button-background-color, $unit-size: $v-unit-size) { + $background-color: $background-color or $v-app-background-color; + + position: relative; + line-height: round($unit-size/2); + white-space: nowrap; + + &.v-has-width label { + white-space: normal; + } + + :root & { + padding-left: round($unit-size/1.5); + + label { + @include v-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 v-valo-button-focus-style($background-color: $background-color, $border-fallback: null); + box-shadow: v-valo-button-box-shadow($background-color), v-valo-focus-box-shadow(); + } + + & ~ label:before, + & ~ label:after { + content: ""; + display: inline-block; + @include box-sizing(border-box); + width: round($unit-size/2); + height: round($unit-size/2); + position: absolute; + top: 0; + left: 0; + border-radius: min(round($unit-size/6), $v-border-radius); + font-size: round($v-font-size * 0.8 * ($unit-size/$v-unit-size)); + text-align: center; + } + + & ~ label:before { + @include v-valo-button-style($background-color: $background-color, $unit-size: $unit-size); + padding: 0; + height: round($unit-size/2); + } + + & ~ label:after { + @include v-valo-checkbox-icon-style; + color: transparent; + @if $v-animations-enabled { + @include transition(color 100ms); + } + } + + &:active ~ label:after { + @include v-valo-button-active-style($background-color: $background-color); + } + + &:checked ~ label:after { + color: v-valo-selection-color($context: $background-color); + } + + &[disabled] { + ~ label:before, + ~ label:after { + @include opacity($v-disabled-opacity); + } + + &:active ~ label:after { + background: transparent; + } + } + + } + + & > .v-icon, + & > label .v-icon { + margin: 0 round($unit-size/6) 0 round($unit-size/12); + min-width: 1em; + } + +} diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss new file mode 100644 index 0000000000..10ba39e16c --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss @@ -0,0 +1,200 @@ +@mixin v-valo-colorpicker-global ($primary-stylename: v-colorpicker) { + $v-valo-colorpicker-pathPrefix: null; + @if $v-relative-paths == false { + $v-valo-colorpicker-pathPrefix: "../valo/components/img/colorpicker/"; + } + + .#{$primary-stylename}-popup.v-window { + min-width: 220px !important; + } + + .#{$primary-stylename}-gradient-clicklayer { + @include opacity(0); + } + + .rgb-gradient .#{$primary-stylename}-gradient-background { + background: url(#{$v-valo-colorpicker-pathPrefix}gradient2.png); + } + + .hsv-gradient .#{$primary-stylename}-gradient-foreground { + background: url(#{$v-valo-colorpicker-pathPrefix}gradient.png); + } + + .#{$primary-stylename}-gradient-lowerbox { + border-right: 1px solid rgba(122,122,122,.5); + border-top: 1px solid rgba(122,122,122,.5); + } + + .#{$primary-stylename}-gradient-higherbox { + border-left: 1px solid rgba(122,122,122,.5); + border-bottom: 1px solid rgba(122,122,122,.5); + } + + .#{$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(#{$v-valo-colorpicker-pathPrefix}slider_hue_bg.png); + } + + .#{$primary-stylename}-popup .v-textfield-dark { + color: #fff; + } + + .#{$primary-stylename}-popup .v-textfield-light { + color: #000; + } + + // TODO magic numbers + .#{$primary-stylename}-grid { + height: 319px; + } + + .#{$primary-stylename}-popup .colorselect td { + line-height: 15px; + } +} + + + + + + +@mixin v-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; + box-shadow: none; + } + + .v-slider-green .v-slider-base:after { + background: green; + border: none; + box-shadow: none; + } + + .v-slider-blue .v-slider-base:after { + background: blue; + border: none; + 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-app-background-color; + border-top: $v-border-width solid scale-color($v-app-background-color, $lightness: -5%); + + .v-expand { + overflow: visible; + } + + .v-button { + width: 80% !important; + } + } + } + + .#{$primary-stylename}-preview { + width: auto !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); + } + } + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss new file mode 100644 index 0000000000..ef0542830a --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -0,0 +1,286 @@ +$v-combobox-hover-style-enabled: $v-hover-styles-enabled !default; + + + + +@mixin v-valo-combobox ($primary-stylename: v-filterselect) { + + .#{$primary-stylename} { + position: relative; + width: $v-default-field-width; + @include v-valo-combobox-style($primary-stylename: $primary-stylename); + white-space: nowrap; + + .v-icon { + position: absolute; + } + } + + .#{$primary-stylename}-suggestpopup { + @include v-valo-combobox-popup-style; + } + +} + + + + + + +@mixin v-valo-combobox-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, + $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth, + $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius, + $background-color: $v-textfield-background-color, $primary-stylename: v-filterselect) { + + $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color); + $bevel-style: $bevel-style or $v-bevel-style; + $bevel-depth: $bevel-depth or $v-bevel-depth; + $unit-size: $unit-size or $v-unit-size; + $border-radius: $border-radius or $v-border-radius; + + .#{$primary-stylename}-input { + @include v-valo-combobox-input-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $unit-size: $unit-size, + $shadow-style: $shadow-style, $shadow-depth: $shadow-depth, + $border-radius: $border-radius, $background-color: $background-color); + } + + .v-icon { + max-height: $unit-size; + $padding-width: ceil($unit-size/6); + @if $border-radius { + $padding-width: $padding-width + ceil($border-radius/3); + } + margin-left: $padding-width; + + + .#{$primary-stylename}-input { + padding-left: $padding-width + $unit-size; + } + } + + &.#{$primary-stylename}-prompt > .#{$primary-stylename}-input { + @include v-valo-textfield-prompt-style(v-valo-textfield-background-color($background-color)); + } + + .#{$primary-stylename}-button { + @include v-valo-combobox-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth, + $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 v-valo-textfield-readonly-style; + } + + .#{$primary-stylename}-button { + cursor: default; + pointer-events: none; + &:active:after { + display: none; + } + } + } +} + + + + + +@include keyframes(v-valo-combobox-show-status) { + 0% { + opacity: 0; + @include transform( translatey(-100%) ); + } +} + + + + +@mixin v-valo-combobox-input-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, + $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth, + $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius, + $background-color: $v-textfield-background-color) { + @include box-sizing(border-box); + @include v-valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, + $shadow-style: $shadow-style, $shadow-depth: $shadow-depth, + $unit-size: $unit-size, $border-radius: $border-radius, + $background-color: $background-color) ; + width: 100%; + height: 100%; + padding-right: $unit-size * 1.2; +} + + + + + + + +@mixin v-valo-combobox-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, + $background-color: $v-textfield-background-color) { + @include v-valo-tappable; + position: absolute; + top: $v-textfield-border-width; + right: $v-textfield-border-width; + bottom: $v-textfield-border-width; + width: $unit-size; + cursor: pointer; + border-left: $v-textfield-border-width solid blend-darken(black($bevel-depth/200%), $background-color); + + @if $v-border-radius > 0 { + border-radius: 0 $v-border-radius $v-border-radius 0; + } + + &:before { + @include v-valo-combobox-button-icon-style($background-color); + color: mix($background-color, v-valo-font-color($background-color)); + @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-combobox-hover-style-enabled { + &:hover:before { + color: v-valo-font-color($background-color); + } + } + + &:active:after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: inherit; + @include v-valo-button-active-style($background-color); + } +} + + + +@mixin v-valo-combobox-button-icon-style ($background-color) { + font-family: FontAwesome; + content: "\f078"; + color: v-valo-font-color($background-color); +} + + + + +@mixin v-valo-combobox-popup-style ($background-color: null) { + + .v-filterselect-suggestmenu { + @include v-valo-selection-overlay-style($background-color: $background-color); + 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 v-valo-selection-item-style; + } + + .gwt-MenuItem-selected { + @include v-valo-selection-item-selected-style($parent-background-color: $background-color); + } + + .v-filterselect-status { + position: absolute; + right: $v-border-radius; + $bg: $background-color or $v-app-background-color; + $bg: scale-color($bg, $lightness: -15%); + background: transparentize($bg, .1); + color: v-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(v-valo-combobox-show-status 200ms 80ms backwards); + } + + > * { + color: v-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) ); + + $bg: $background-color or $v-app-background-color; + color: v-valo-font-color($bg); + + &:hover { + @include opacity(1); + } + + span { + // Hide text + display: none; + } + } + + &:hover div[class*="page"] { + @include transform( scale(1) ); + } + + div[class*="prev"] { + top: 0; + @include transform-origin( 100% 0% ); + &:before { + content: "\f0d8"; + } + + } + + div[class*="next"] { + bottom: 0; + @include transform-origin( 100% 100% ); + &:before { + content: "\f0d7"; + } + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_csslayout.scss b/WebContent/VAADIN/themes/valo/components/_csslayout.scss new file mode 100644 index 0000000000..6537915344 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_csslayout.scss @@ -0,0 +1,52 @@ +@mixin v-valo-csslayout ($primary-stylename: v-csslayout){ + +} + + +@mixin v-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; + } + } + + // 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; + + @if $v-border-width > 0 { + margin-left: -$v-border-width; + } @else { + margin-left: round($v-font-size/8); + } + + &:first-child { + margin-left: 0; + } + + // Focused component should be on top + &:focus, + [class*="focus"] { + position: relative; + z-index: 1; + } + } + + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_customcomponent.scss b/WebContent/VAADIN/themes/valo/components/_customcomponent.scss new file mode 100644 index 0000000000..2a340fc743 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_customcomponent.scss @@ -0,0 +1,3 @@ +@mixin v-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..9b28672c35 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_customlayout.scss @@ -0,0 +1,3 @@ +@mixin v-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..9e4328cf40 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss @@ -0,0 +1,404 @@ +$v-datefield-hover-style-enabled: $v-hover-styles-enabled !default; + + +@mixin v-valo-datefield ($primary-stylename: v-datefield) { + + .#{$primary-stylename} { + position: relative; + width: $v-default-field-width; + height: $v-unit-size; + @include v-valo-datefield-style($primary-stylename: $primary-stylename); + } + + // 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 v-valo-datefield-popup-style; + } + + @include v-valo-datefield-calendarpanel-style; + +} + + +@mixin v-valo-inline-datefield ($primary-stylename: v-inline-datefield) { + @include v-valo-datefield-calendarpanel-style(#{$primary-stylename}-calendarpanel); +} + + + + + +@mixin v-valo-datefield-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, + $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius, + $background-color: $v-textfield-background-color, $primary-stylename: v-datefield) { + + $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color); + $bevel-style: $bevel-style or $v-bevel-style; + $bevel-depth: $bevel-depth or $v-bevel-depth; + $unit-size: $unit-size or $v-unit-size; + $border-radius: $border-radius or $v-border-radius; + + .#{$primary-stylename}-textfield { + @include box-sizing(border-box); + @include v-valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, + $unit-size: $unit-size, $border-radius: $border-radius, + $background-color: $background-color) ; + padding-left: $unit-size * 1.2; + width: 100%; + height: 100%; + } + + &.#{$primary-stylename}-prompt > .#{$primary-stylename}-textfield { + @include v-valo-textfield-prompt-style(v-valo-textfield-background-color($background-color)); + } + + .#{$primary-stylename}-button { + @include v-valo-datefield-button-style($unit-size: $unit-size, $bevel-style: $bevel-style, $bevel-depth: $bevel-depth, + $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}-textfield { + @include v-valo-textfield-readonly-style; + } + + .#{$primary-stylename}-button { + cursor: default; + pointer-events: none; + &:active:after { + display: none; + } + } + } +} + + + + +@mixin v-valo-datefield-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, + $background-color: $v-textfield-background-color) { + @include v-valo-tappable; + -webkit-appearance: none; + background: transparent; + border: none; + padding: 0; + position: absolute; + top: $v-textfield-border-width; + bottom: $v-textfield-border-width; + left: $v-textfield-border-width; + width: $unit-size; + line-height: $unit-size - ($v-textfield-border-width*2); + text-align: center; + cursor: pointer; + font: inherit; + border-right: $v-textfield-border-width solid blend-darken(black($bevel-depth/200%), $background-color); + outline: none; + margin: 0; + + @if $v-border-radius > 0 { + $br: max(0, $v-border-radius - $v-textfield-border-width); + border-radius: $br 0 0 $br; + } + + &:before { + @include v-valo-datefield-button-icon-style($background-color); + color: mix($background-color, v-valo-font-color($background-color)); + @if $v-animations-enabled { + @include transition(color 140ms); + } + } + + @if $v-combobox-hover-style-enabled { + &:hover:before { + color: v-valo-font-color($background-color); + } + } + + &:active:after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + @include v-valo-button-active-style($background-color); + } +} + + + + +@mixin v-valo-datefield-button-icon-style ($background-color) { + font-family: FontAwesome; + content: "\f073"; + color: v-valo-font-color($background-color); +} + + + + +@mixin v-valo-datefield-popup-style ($context: $v-app-background-color) { + $copy: $v-app-background-color; + $v-app-background-color: $context; + + @include v-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 v-valo-datefield-calendarpanel-style; + + $v-app-background-color: $copy; +} + + +@mixin v-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 v-valo-datefield-calendarpanel-day-style; + display: inline-block; + @include box-sizing(border-box); + cursor: pointer; + &:hover { + @include v-valo-datefield-calendarpanel-day-hover-style; + } + } + + .#{$primary-stylename}-day-offmonth { + @include v-valo-datefield-calendarpanel-day-offmonth-style; + } + + .#{$primary-stylename}-day-today { + @include v-valo-datefield-calendarpanel-day-today-style; + } + + .#{$primary-stylename}-day.#{$primary-stylename}-day-selected, + .#{$primary-stylename}-day.#{$primary-stylename}-day-selected:hover { + @include v-valo-datefield-calendarpanel-day-selected-style + } + + .#{$primary-stylename}-day.#{$primary-stylename}-day-focused { + @include v-valo-datefield-calendarpanel-day-focused-style; + } + + + + .#{$primary-stylename}-weekdays { + height: round($v-unit-size * 0.7); + color: mix(v-valo-font-color($v-app-background-color), rgba($v-app-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"] { + //width: round($v-unit-size * 0.5); + + button { + @include appearance(none); + border: none; + background: transparent; + padding: 0; + margin: 0; + cursor: pointer; + color: transparent; + width: round($v-unit-size * 0.5); + height: round($v-unit-size * 0.67); + outline: none; + position: relative; + + &:before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + color: mix($v-app-background-color, v-valo-font-color($v-app-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-valo-link-font-color(); + } + } + } + } + + .v-button-prevyear:before { + @include v-valo-datefield-calendarpanel-prevyear-icon-style; + } + + .v-button-prevmonth:before { + @include v-valo-datefield-calendarpanel-prevmonth-icon-style; + } + + .v-button-nextyear:before { + @include v-valo-datefield-calendarpanel-nextyear-icon-style; + } + + .v-button-nextmonth:before { + @include v-valo-datefield-calendarpanel-nextmonth-icon-style; + } + + td.#{$primary-stylename}-month { + width: round($v-unit-size * 3.5); + @include v-valo-datefield-calendarpanel-month-style; + } + + .v-datefield-year td.v-datefield-calendarpanel-month { + width: round($v-unit-size * 2); + } + + .v-datefield-calendarpanel-weeknumber, + .v-datefield-calendarpanel-weekdays.v-datefield-calendarpanel-weeknumbers td:first-child { + width: round($v-unit-size * 0.7); + color: mix(v-valo-font-color($v-app-background-color), rgba($v-app-background-color, .7)); + font-size: ceil($v-font-size * 0.86); + display: inline-block; + text-align: left; + } + + 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 v-valo-datefield-calendarpanel-day-style { + width: round($v-unit-size * 0.8); + height: round($v-unit-size * 0.7); + line-height: round($v-unit-size * 0.7); + text-align: center; + font-size: ceil($v-font-size * 0.86); + background: $v-app-background-color; + @if $v-border-radius > 0 { + border-radius: ceil($v-border-radius/2); + } + @if $v-animations-enabled { + @include transition(color 200ms); + } +} + +@mixin v-valo-datefield-calendarpanel-day-hover-style { + color: v-valo-selection-color(); +} + +@mixin v-valo-datefield-calendarpanel-day-offmonth-style { + color: mix(v-valo-font-color($v-app-background-color), $v-app-background-color); + background: transparent; +} + +@mixin v-valo-datefield-calendarpanel-day-today-style { + color: v-valo-selection-color(); + background: blend-overlay(v-valo-selection-color(), $v-app-background-color); + font-weight: $v-font-weight + 100; +} + +@mixin v-valo-datefield-calendarpanel-day-selected-style { + color: v-valo-font-color(v-valo-selection-color()); + @include v-valo-gradient(v-valo-selection-color()); + font-weight: $v-font-weight + 100; +} + +@mixin v-valo-datefield-calendarpanel-day-focused-style { + box-shadow: v-valo-focus-box-shadow(); + position: relative; // Show above other cells +} + + +@mixin v-valo-datefield-calendarpanel-nextmonth-icon-style { + font-family: FontAwesome; + content: "\f105"; +} + +@mixin v-valo-datefield-calendarpanel-prevmonth-icon-style { + font-family: FontAwesome; + content: "\f104"; +} + +@mixin v-valo-datefield-calendarpanel-nextyear-icon-style { + font-family: FontAwesome; + content: "\f101"; +} + +@mixin v-valo-datefield-calendarpanel-prevyear-icon-style { + font-family: FontAwesome; + content: "\f100"; +} + +@mixin v-valo-datefield-calendarpanel-month-style { + color: v-valo-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..5a7b34b0f5 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss @@ -0,0 +1,5 @@ +@mixin v-valo-dragwrapper ($primary-stylename: v-ddwrapper) { + + // TODO + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_escalator.scss b/WebContent/VAADIN/themes/valo/components/_escalator.scss new file mode 100644 index 0000000000..30da7bb501 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_escalator.scss @@ -0,0 +1,109 @@ +@mixin v-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..84dee134a9 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_form.scss @@ -0,0 +1,15 @@ +@mixin v-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..f67f55345a --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss @@ -0,0 +1,147 @@ +@mixin v-valo-formlayout ($primary-stylename: v-formlayout) { + + @include v-valo-formlayout-spacing; + @include v-valo-formlayout-margins; + + .#{$primary-stylename} > table { + border-spacing: 0; + } + + .#{$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; + } + } + + .#{$primary-stylename}-contentcell { + .v-checkbox { + font-weight: $v-font-weight + 100; + } + } + +} + + +@mixin v-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 v-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 v-valo-formlayout-light-style ($primary-stylename: v-formlayout, $row-height: $v-unit-size) { + > 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: $v-border-width solid darken($v-app-background-color, 5%); + } + + > table > tbody > .#{$primary-stylename}-lastrow td { + border-bottom: none; + } + + > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-captioncell { + @include opacity(.7); + text-align: right; + padding-left: ceil($v-unit-size/3); + line-height: $row-height; + } + + .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-textfield { + background: transparent; + border: none; + box-shadow: none; + border-radius: 0; + @include v-valo-textfield-size($row-height, 0); + } + + .v-textarea { + height: auto; + } + + .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); + } +} + diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss new file mode 100644 index 0000000000..62462642b4 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_grid.scss @@ -0,0 +1,5 @@ +@import "escalator"; + +@mixin v-valo-grid($primary-styleName : v-grid) { + @include v-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..df964600e9 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_gridlayout.scss @@ -0,0 +1,48 @@ +@mixin v-valo-gridlayout-global ($primary-stylename: v-gridlayout) { + .#{$primary-stylename} { + position: relative; + line-height: 0; + } + .#{$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 v-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..8bce4da3f7 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_label.scss @@ -0,0 +1,120 @@ +$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.05em !default; + + +@mixin v-valo-label ($primary-stylename: v-label) { + + .#{$primary-stylename}-undef-w { + white-space: nowrap; + } + + h1, .h1, + h2, .h2, + h3, .h3 { + line-height: $v-line-height--header; + font-weight: $v-font-weight--header; + color: v-valo-header-color($v-app-background-color); + } + + h1, .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, .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, .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, .h4 { + line-height: $v-line-height--header; + font-weight: $v-font-weight + 200; + font-size: $v-font-size--small; + color: v-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 + > .h1, + > .h2, + > .h3 + > .h4 { + &:first-child { + margin-top: $v-font-size; + } + } + } + + .v-verticallayout > .v-slot:first-child, + .v-verticallayout > div > .v-slot:first-child { + h1, .h1, + h2, .h2, + h3, .h3 + h4, .h4 { + margin-top: $v-font-size; + } + } + + h1, .h1, + h2, .h2, + h3, .h3, + h4, .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; + } + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_link.scss b/WebContent/VAADIN/themes/valo/components/_link.scss new file mode 100644 index 0000000000..e02a64f678 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_link.scss @@ -0,0 +1,46 @@ +$v-link-font-color: null !default; +$v-link-text-decoration: underline !default; +$v-link-cursor: pointer !default; + + +@mixin v-valo-link ($primary-stylename: v-link) { + .#{$primary-stylename} { + @include v-valo-link-style; + + a { + cursor: inherit; + color: inherit; + text-decoration: inherit; + @if $v-animations-enabled { + @include transition(inherit); + } + } + + .v-icon { + cursor: inherit; + } + } +} + + +@mixin v-valo-link-style { + cursor: $v-link-cursor; + color: v-valo-link-font-color(); + text-decoration: $v-link-text-decoration; + font-weight: inherit; + + @if $v-animations-enabled { + @include transition(color 140ms); + } + + &:hover { + color: lighten(v-valo-link-font-color(), 10%); + } +} + + + +@function v-valo-link-font-color ($color: null, $context: null) { + $link-color: $color or $v-link-font-color or v-valo-focus-color($color: $color, $context: $context); + @return $link-color; +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_loginform.scss b/WebContent/VAADIN/themes/valo/components/_loginform.scss new file mode 100644 index 0000000000..f52289d606 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_loginform.scss @@ -0,0 +1,3 @@ +@mixin v-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..86f5fe42cc --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss @@ -0,0 +1,222 @@ +@mixin v-valo-menubar ($primary-stylename: v-menubar) { + + $copy: $v-button-hover-style-enabled; + $v-button-hover-style-enabled: false; + + .#{$primary-stylename} { + @include v-valo-button-common-properties; + @include v-valo-button-style; + padding: 0; + text-align: left; + } + + $v-button-hover-style-enabled: $copy; + + .#{$primary-stylename}:active:after { + background: transparent; + } + + .#{$primary-stylename} > .#{$primary-stylename}-menuitem { + @include v-valo-menubar-menuitem-style; + } + + .#{$primary-stylename} > .#{$primary-stylename}-menuitem-checked { + @include v-valo-menubar-menuitem-checked-style; + } + + .v-disabled > .#{$primary-stylename}-menuitem:before { + display: none; + } + + .#{$primary-stylename} > .#{$primary-stylename}-menuitem-selected { + @include v-valo-gradient($color: v-valo-selection-color()); + box-shadow: v-valo-button-box-shadow($background-color: v-valo-selection-color()); + text-shadow: v-valo-button-text-shadow($background-color: v-valo-selection-color()); + color: v-valo-font-color(v-valo-selection-color()); + $bc: v-valo-button-border-color($background-color: v-valo-selection-color()); + border-color: $bc; + + + .#{$primary-stylename}-menuitem { + border-color: $bc; + } + + &:hover:before { + background: none; + } + } + + .#{$primary-stylename} .#{$primary-stylename}-submenu-indicator { + display: none; + } + + .#{$primary-stylename}-popup { + @include v-valo-menubar-popup-style($primary-stylename); + //margin-top: -$v-selection-overlay-padding-vertical !important; + //margin-left: $v-selection-overlay-padding-horizontal !important; + } + +} + + + + +@mixin v-valo-menubar-menuitem-style { + position: relative; + z-index: 1; + display: inline-block; + @include v-valo-button-size($v-unit-size, $v-border-radius); + height: $v-unit-size - $v-button-border-width*2; + border-left: $v-button-border-width solid; + border-color: inherit; + vertical-align: top; + line-height: $v-unit-size - $v-button-border-width*2 - 1px; + @include user-select(none);; + + $br: $v-button-border-radius - $v-button-border-width; + &:first-child { + border-left: none; + border-radius: $br 0 0 $br; + } + + &:last-child { + border-radius: 0 $br $br 0; + } + + &:first-child:last-child { + border-radius: $br; + } + + &:before { + content: ""; + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + @if $v-button-hover-style-enabled { + &:hover:before { + @include v-valo-button-hover-style; + border: none; + } + } + + &:active:before { + @include v-valo-button-active-style; + } + + $margin-width: ceil($v-unit-size/2.4/5); + .v-icon { + margin: 0 $margin-width 0 #{-$margin-width}; + } + + &[class*="-icon-only"] .v-icon { + margin: 0 #{-$margin-width}; + } +} + + + + + +@mixin v-valo-menubar-popup-style ($primary-stylename: v-menubar, $context: $v-app-background-color) { + + $copy: $v-app-background-color; + $v-app-background-color: $context; + + @include v-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 v-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 v-valo-menubar-submenu-indicator-style; + } + } + + .#{$primary-stylename}-menuitem-selected { + @include v-valo-selection-item-selected-style; + } + + .#{$primary-stylename}-separator { + display: block; + margin: $v-selection-overlay-padding-vertical 0; + height: 0; + overflow: hidden; + border-bottom: 1px solid darken(v-valo-overlay-background-color(), 5%); + } + + [class*="checked"] .#{$primary-stylename}-menuitem-caption:before { + @include v-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; + @include opacity($v-disabled-opacity); + } + + $v-app-background-color: $copy; +} + + + +@mixin v-valo-menubar-submenu-indicator-style { + font-family: FontAwesome; + content: "\f054"; + line-height: $v-selection-item-height + 2px; +} + +@mixin v-valo-menubar-checked-icon-style { + content: "\f00c"; + font-family: FontAwesome; +} + + +@mixin v-valo-menubar-menuitem-checked-style ($background-color: scale-color($v-app-background-color, $lightness: -5%, $saturation: -5%)) { + @include v-valo-gradient($color: $background-color, $depth: $v-gradient-depth/4, $direction: to top); + + @if color-luminance($background-color) < color-luminance($v-app-background-color) { + $border-color: v-valo-button-border-color($background-color: $background-color); + border-color: $border-color; + + + [class*="menuitem"] { + @if length($border-color) > 1 { + $border-color: nth($border-color, 2); + } + border-left-color: $border-color; + } + } + + color: v-valo-font-color($background-color, 0.9); + text-shadow: v-valo-button-text-shadow($background-color: $background-color); +} + +@mixin v-valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) { + .#{$primary-stylename}-menuitem-checked { + @include v-valo-menubar-menuitem-checked-style($background-color: $background-color); + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_nativebutton.scss b/WebContent/VAADIN/themes/valo/components/_nativebutton.scss new file mode 100644 index 0000000000..aa00a6206a --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_nativebutton.scss @@ -0,0 +1,5 @@ +@mixin v-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..89905d985f --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss @@ -0,0 +1,36 @@ +@mixin v-valo-nativeselect ($primary-stylename: v-select) { + .#{$primary-stylename} select { + @include v-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 v-valo-nativeselect-select-style { + $_border-color: darken($v-app-background-color, $v-bevel-depth); + @if is-dark-color($v-app-background-color) { + $_border-color: lighten($v-app-background-color, $v-bevel-depth); + } + border: $v-border-width solid $_border-color; + background-color: v-valo-textfield-background-color($v-app-background-color); + + &:focus { + outline: none; + //@include v-valo-button-focus-style; + box-shadow: v-valo-focus-box-shadow(); + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss new file mode 100644 index 0000000000..14f7fe1d29 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss @@ -0,0 +1,41 @@ +@mixin v-valo-optiongroup ($primary-stylename: v-optiongroup) { + + .v-radiobutton { + :root & > input { + &:checked ~ label:after { + $size: ceil($v-unit-size/6); + $offset: round($v-unit-size/6); + width: $size; + height: $size; + top: $offset; + left: $offset; + background: v-valo-selection-color($v-button-background-color); + } + + & ~ label:before, + & ~ label:after { + border-radius: 50%; + content: ""; + } + } + } + + .v-select-optiongroup { + + .v-radiobutton, + .v-checkbox { + display: block; + margin: round($v-unit-size/4) $v-font-size 0 0; + + &:first-child { + margin-top: round($v-unit-size/6); + } + } + + &.v-has-width label { + white-space: normal; + } + + } + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss new file mode 100644 index 0000000000..4e62721fe9 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss @@ -0,0 +1,185 @@ +@mixin v-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%; + + // TODO fixes extra white space issues in some cases (can't remember what anymore), but causes some styles to clip + //overflow: hidden; + } + + .v-slot, + .v-spacing { + display: inline-block; + white-space: normal; + vertical-align: top; + line-height: 0; + } + + // 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; + display: block; + clear: both; + } + + .v-horizontal > .v-spacing, + .v-horizontal > .v-expand > .v-spacing { + height: 0; + } + + .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; + overflow: hidden; + } + + .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 v-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 v-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; + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss new file mode 100644 index 0000000000..54c9df18ba --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_panel.scss @@ -0,0 +1,119 @@ +$v-panel-shadow-style: $v-shadow-style !default; +$v-panel-border-width: $v-border-width !default; +$v-panel-border-radius: $v-border-radius !default; + +$v-panel-caption-background-color: null !default; +$v-panel-caption-gradient-depth: $v-gradient-depth/4 !default; +$v-panel-caption-bevel-style: first($v-bevel-style) !default; +$v-panel-caption-bevel-depth: $v-bevel-depth !default; + + + +@mixin v-valo-panel ($primary-stylename: v-panel) { + + .#{$primary-stylename} { + @include v-valo-panel-style; + } + + .#{$primary-stylename}-caption { + @include v-valo-panel-caption-style; + } + + .#{$primary-stylename}-content { + @include box-sizing(border-box); + width: 100%; + height: 100%; + @include v-valo-panel-adjust-content-margins; + } + +} + + + +@function v-valo-panel-background-color ($context: $v-app-background-color) { + $bg-color: lighten($context, 5%); + @return $bg-color; +} + + +@function v-valo-panel-caption-background-color ($background-color) { + @return $background-color or $v-app-background-color; +} + + +@function v-valo-panel-border-color ($background-color: $v-app-background-color) { + $border-color: if(color-luminance($background-color) < color-luminance($v-app-background-color), $background-color, $v-app-background-color); + $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-30%, -$v-bevel-depth/2))); + $border-color: scale-color($border-color, $saturation: -$v-bevel-depth/2); + @return $border-color; +} + + +@mixin v-valo-panel-style { + background: v-valo-panel-background-color(); + border-radius: $v-panel-border-radius; + border: $v-panel-border-width solid v-valo-panel-border-color(v-valo-panel-background-color()); + box-shadow: v-valo-shadow($shadow-style: $v-panel-shadow-style); +} + + +@mixin v-valo-panel-caption-style ($background-color: $v-panel-caption-background-color) { + @include box-sizing(border-box); + padding: 0 round($v-unit-size/3); + line-height: $v-unit-size; + $_bg: v-valo-panel-caption-background-color($background-color); + $_border-color: scale-color($_bg, $lightness: -$v-panel-caption-bevel-depth/2, $saturation: -$v-panel-caption-bevel-depth/2); + border-bottom: $v-panel-border-width solid $_border-color; + border-bottom-color: rgba($_border-color, .8); + @include v-valo-gradient($color: $_bg, $depth: $v-panel-caption-gradient-depth); + color: v-valo-font-color($_bg); + font-weight: $v-caption-font-weight; + font-size: $v-caption-font-size; + box-shadow: v-valo-bevel($_bg, $bevel-style: $v-panel-caption-bevel-style, $bevel-depth: $v-panel-caption-bevel-depth, $gradient-depth: $v-panel-caption-gradient-depth); +} + + +@mixin v-valo-panel-well-style { + $_bg: scale-color(adjust-color($v-app-background-color, $lightness: -2%), $saturation: -1.5%); + background: $_bg; + box-shadow: v-valo-shadow($shadow-style: (0 1px 0 0 hilite, join(inset, $v-panel-shadow-style))); + border-radius: $v-border-radius; + border: $v-border-width solid v-valo-panel-border-color(v-valo-panel-background-color()); + + .v-panel-caption { + background: transparent; + box-shadow: none; + } +} + + +@mixin v-valo-panel-borderless-style { + background: transparent; + border: none; + box-shadow: none; + + .v-panel-caption { + background: transparent; + box-shadow: none; + } +} + + +@mixin v-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..056906f7c7 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_popupview.scss @@ -0,0 +1,3 @@ +@mixin v-valo-popupview ($primary-stylename: v-popupview) { + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_progressbar.scss b/WebContent/VAADIN/themes/valo/components/_progressbar.scss new file mode 100644 index 0000000000..5e8fd21fa3 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_progressbar.scss @@ -0,0 +1,36 @@ +$v-progressbar-border-radius: $v-border-radius !default; + + +@mixin v-valo-progressbar ($primary-stylename: v-progressbar) { + + .#{$primary-stylename}-wrapper { + @include v-valo-progressbar-track-style; + } + + .#{$primary-stylename}-indicator { + @include v-valo-progressbar-indicator-style; + } + +} + + +@mixin v-valo-progressbar-track-style { + border-radius: $v-progressbar-border-radius; + height: round($v-unit-size/4); + min-width: $v-unit-size * 2; + @include v-valo-gradient($color: scale-color($v-app-background-color, $lightness: min($v-bevel-depth/-2, -10%), $saturation: $v-bevel-depth/-2), $style: linear-reverse); + box-shadow: v-valo-textfield-box-shadow(); + @include box-sizing(border-box); +} + + +@mixin v-valo-progressbar-indicator-style { + border-radius: $v-progressbar-border-radius; + height: inherit; + min-width: max($v-border-radius*2, 3px); + @include v-valo-gradient($color: v-valo-selection-color()); + box-shadow: v-valo-button-box-shadow($background-color: v-valo-selection-color(), $bevel-depth: $v-bevel-depth/2); + border: $v-button-border-width solid; + border-color: v-valo-button-border-color($v-bevel-style, $v-bevel-depth/2, v-valo-selection-color()); + @include box-sizing(border-box); +} diff --git a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss new file mode 100644 index 0000000000..49b2eda008 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss @@ -0,0 +1,6 @@ +@mixin v-valo-richtextarea ($primary-stylename: v-richtextarea) { + .#{$primary-stylename} .gwt-ToggleButton, + .#{$primary-stylename} .gwt-PushButton { + display: inline-block; + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_slider.scss b/WebContent/VAADIN/themes/valo/components/_slider.scss new file mode 100644 index 0000000000..bb3fd989a4 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_slider.scss @@ -0,0 +1,147 @@ +$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; + + +@mixin v-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 v-valo-progressbar-track-style; + min-width: $v-unit-size * 2; + height: $v-slider-track-size; + margin: round(($v-unit-size - $v-slider-track-size)/2) round($v-slider-handle-width/2); + white-space: nowrap; + overflow: hidden; + border-radius: $v-slider-track-border-radius; + + &:after { + @include v-valo-progressbar-indicator-style; + min-width: 0; + content: ""; + display: inline-block; + //position: relative; + margin-left: -100%; + width: 100%; + vertical-align: top; + + .v-ie8 & { + left: round(-$v-slider-handle-width/2); + } + } + } + + .#{$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 v-valo-button-style; + } + + &:after { + @include v-valo-button-focus-style; + 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 v-valo-tooltip-style; + } + + + + // Vertical + + + + .#{$primary-stylename}-vertical { + padding: round($v-slider-handle-width/2) 0; + height: $v-unit-size * 2; // Effectively min-height + + .#{$primary-stylename}-base { + @include v-valo-gradient($color: scale-color($v-app-background-color, $lightness: min($v-bevel-depth/-2, -5%), $saturation: $v-bevel-depth/-2), $style: linear-reverse, $direction: to right); + min-width: 0; + width: $v-slider-track-size; + height: 100% !important; + min-height: $v-unit-size * 2; + margin: 0 round(($v-unit-size - $v-slider-track-size)/2); + + &:after { + margin-left: 0; + @include v-valo-gradient($color: v-valo-selection-color(), $direction: to right); + + .v-ie8 & { + top: round($v-slider-handle-width/2) - 2px; + 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); + } + } + } + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss new file mode 100644 index 0000000000..622b24a3a2 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss @@ -0,0 +1,177 @@ +$v-splitpanel-splitter-size: round($v-unit-size/5) !default; + + +@mixin v-valo-splitpanel($primary-stylename : v-splitpanel) { + + // Disable splitter shadow (should most likely be a variable) + $copy: $v-shadow-depth; + $v-shadow-depth: 0%; + + // Round to even number + $v-splitpanel-splitter-size: $v-splitpanel-splitter-size + $v-splitpanel-splitter-size%2; + + .#{$primary-stylename}-vertical, + .#{$primary-stylename}-horizontal { + overflow: hidden; + white-space: nowrap; + } + + .#{$primary-stylename}-hsplitter { + width: $v-splitpanel-splitter-size; + } + + .#{$primary-stylename}-hsplitter div, + .#{$primary-stylename}-vsplitter div { + @include v-valo-button-style; + @include box-sizing(border-box); + height: auto; + padding: 0; + border-radius: 0; + position: absolute; + z-index: 1; + top: 0; + right: 0; + bottom: 0; + left: 0; + cursor: s-resize; + cursor: row-resize; + + &:before { + content: ""; + width: $v-unit-size; + height: 0; + border: 1px solid; + $color: $v-button-background-color or $v-app-background-color; + $shade: max($v-bevel-depth, 10%); + $border-color1: scale-color($color, $lightness: -$shade, $saturation: -$shade/2); + $border-color2: scale-color($color, $lightness: -$shade/2, $saturation: -$shade/4); + border-color: $border-color1 $border-color2 $border-color2 $border-color1; + position: absolute; + top: 50%; + left: 50%; + margin-left: round(-$v-unit-size/2); + margin-top: -1px; + } + } + + .#{$primary-stylename}-vsplitter { + height: $v-splitpanel-splitter-size; + } + + .#{$primary-stylename}-hsplitter div { + cursor: e-resize; + cursor: col-resize; + $color: $v-button-background-color or $v-app-background-color; + @include v-valo-gradient($color: $color, $direction: to right); + + &:before { + width: 0; + height: $v-unit-size; + margin-left: -1px; + margin-top: round(-$v-unit-size/2); + } + } + + .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; + margin-left: $v-splitpanel-splitter-size; /* Match to the width of the splitter element */ + vertical-align: top; + } + + .#{$primary-stylename}-first-container { + display: inline-block; + vertical-align: top; + } + } + + $v-shadow-depth: $copy; + +} + + + + + + +@mixin v-valo-splitpanel-small ($primary-stylename: v-splitpanel, $stylename: small) { + .#{$primary-stylename}-vsplitter-#{$stylename}, + .#{$primary-stylename}-hsplitter-#{$stylename} { + div { + @include opacity(0); + @include transition(opacity 200ms); + } + + &:hover div { + @include opacity(1); + } + } + + .#{$primary-stylename}-vsplitter-#{$stylename} { + div { + left: 40%; + right: 40%; + height: $v-splitpanel-splitter-size + 1px; + top: round($v-splitpanel-splitter-size/-2); + + &:before { + width: 50%; + left: 25%; + margin-left: 0; + } + } + + &:before { + content: ""; + position: absolute; + height: 1px; + left: 0; + right: 0; + background: darken($v-app-background-color, max($v-bevel-depth/2, 10%)); + } + } + + .#{$primary-stylename}-hsplitter-#{$stylename} { + div { + top: 40%; + bottom: 40%; + width: $v-splitpanel-splitter-size + 1px; + left: round($v-splitpanel-splitter-size/-2); + + &:before { + height: 50%; + top: 25%; + margin-top: 0; + } + } + + &:before { + content: ""; + position: absolute; + width: 1px; + top: 0; + bottom: 0; + background: darken($v-app-background-color, max($v-bevel-depth/2, 10%)); + } + } + + .#{$primary-stylename}-vertical .#{$primary-stylename}-second-container-#{$stylename} { + margin-top: 1px; + position: static !important; + } + + .#{$primary-stylename}-horizontal .#{$primary-stylename}-second-container-#{$stylename} { + margin-left: 1px; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss new file mode 100644 index 0000000000..58d96c688a --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -0,0 +1,496 @@ +$v-table-row-height: $v-unit-size !default; +$v-table-border-width: $v-border-width !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 v-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}-cell-wrapper { + overflow: hidden; + } + + .#{$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 v-valo-table-background-color($context: $v-app-background-color) { + @if is-dark-color($context) { + @return darken($context, 2%); + } + @return lighten($context, 2%); +} + + +@mixin v-valo-table ($primary-stylename: v-table) { + + $background-color: $v-table-background-color or v-valo-table-background-color(); + $border-color: $v-table-border-color or darken($v-app-background-color, max(5%, $v-bevel-depth/3)); + + .#{$primary-stylename} { + // For scroll position indicator + position: relative; + background: $v-app-background-color; + } + + .v-table-header table, + .v-table-footer table, + .v-table-table { + 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 v-valo-gradient($v-app-background-color); + white-space: nowrap; + font-size: $v-table-header-font-size; + text-shadow: v-valo-button-text-shadow($v-app-background-color, $v-bevel-depth); + } + + .#{$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; + } + + .#{$primary-stylename}-footer-container, + .#{$primary-stylename}-caption-container { + overflow: hidden; + line-height: 1; + } + + .#{$primary-stylename}-footer-container { + $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2); + padding-top: $vertical-padding - $v-table-border-width; + padding-bottom: $vertical-padding; + float: right; + padding-right: $v-table-cell-padding-horizontal + $v-table-border-width; + } + + [class^="#{$primary-stylename}-header-cell"] { + position: relative; + display: inline-block; + } + + .#{$primary-stylename}-caption-container, + .#{$primary-stylename}-header-drag { + $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2); + padding-top: $vertical-padding; + padding-bottom: $vertical-padding - $v-table-border-width; + padding-left: $v-table-cell-padding-horizontal; + padding-right: $v-table-cell-padding-horizontal; + border-left: $v-table-border-width solid $border-color; + } + + .#{$primary-stylename}-resizer { + height: $v-table-row-height; + background: transparent; + width: $v-table-resizer-width; + cursor: e-resize; + cursor: col-resize; + position: absolute; + right: 0; + z-index: 1; + } + + .#{$primary-stylename}-cell-content { + border-left: $v-table-border-width solid $border-color; + padding: 0 $v-table-cell-padding-horizontal; + } + + .#{$primary-stylename}-header td:first-child .#{$primary-stylename}-caption-container, + .#{$primary-stylename}-footer td:first-child, + .#{$primary-stylename}-cell-content:first-child { + border-left-color: transparent; + } + + .#{$primary-stylename}-cell-wrapper { + white-space: nowrap; + line-height: 1; + $vertical-padding: round(($v-table-row-height - $v-font-size)/2); + padding: $vertical-padding 0; + } + + .#{$primary-stylename}-body { + border: $v-table-border-width solid $border-color; + } + + .#{$primary-stylename}-table { + background-color: $background-color; + } + + .#{$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-odd { + background-color: darken($background-color, 2%); + } + + .#{$primary-stylename} [class*="-row"].v-selected { + $selected-border-color: darken(v-valo-selection-color(), 8%); + + @include v-valo-gradient(v-valo-selection-color()); + background-origin: border-box; + color: v-valo-font-color(v-valo-selection-color(), 0.9); + text-shadow: v-valo-button-text-shadow(v-valo-selection-color(), $v-bevel-depth); + + + .v-selected { + $gradient-end: first(last(v-valo-gradient-color-stops(v-valo-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}-caption-container { + padding-right: $v-table-sort-indicator-width; + } + } + + .#{$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 v-valo-table-sort-asc-icon-style; + } + + .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator:before { + @include v-valo-table-sort-desc-icon-style; + } + + + .#{$primary-stylename}-focus { + $outline-width: max($v-table-border-width, 1px); + outline: $outline-width solid v-valo-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-valo-focus-color(), .5); + } + + .#{$primary-stylename}-focus-slot-left { + border-left: 2px solid rgba(v-valo-focus-color(), .5); + left: 0; + right: auto; + margin-left: 0 !important; + } + + .#{$primary-stylename}-column-selector { + @include v-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; + 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 v-valo-button-active-style; + } + &:before { + @include v-valo-table-column-selector-icon-style; + } + } + + .#{$primary-stylename}-header-wrap:hover .#{$primary-stylename}-column-selector { + @include opacity(1); + @include transition-delay(100ms); + } + + /* row in column selector */ + .v-on, + .v-off { + &:before { + @include v-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; + box-shadow: none; + background: transparent; + @include opacity(1); + + tr { + display: block; + @include v-valo-drag-element-style; + + &[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 { + box-shadow: 0 0 0 2px rgba(v-valo-focus-color(), .5); + + @if color-luminance(v-valo-focus-color()) + 50 < color-luminance($background-color) { + border-color: v-valo-focus-color(); + } + + .v-ie8 & { + border-color: v-valo-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-valo-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-valo-focus-color(); + font-size: $v-font-size * 2; + line-height: 2px; + color: v-valo-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 v-valo-table-sort-asc-icon-style { + content: '\f0dd'; + font-family: FontAwesome; +} + +@mixin v-valo-table-sort-desc-icon-style { + content: '\f0de'; + font-family: FontAwesome; +} + +@mixin v-valo-table-column-selector-icon-style { + font-family: FontAwesome; + content: "\f013"; +} + +@mixin v-valo-table-column-visible-icon-style { + content: "\f00c"; + font-family: FontAwesome; +} + + + + +@mixin v-valo-table-no-stripes ($primary-stylename: v-table) { + .#{$primary-stylename}-row, + .#{$primary-stylename}-row-odd { + background: transparent; + } +} + + + + +@mixin v-valo-table-no-vertical-lines ($primary-stylename: v-table) { + .#{$primary-stylename}-cell-content, + [class*="row"].v-selected .#{$primary-stylename}-cell-content { + border-left-color: transparent; + border-right-color: transparent; + } +} + +@mixin v-valo-table-no-horizontal-lines ($primary-stylename: v-table) { + .#{$primary-stylename}-cell-content, + [class*="row"].v-selected .#{$primary-stylename}-cell-content { + border-top-color: transparent; + border-bottom-color: transparent; + } +} + +@mixin v-valo-table-no-header ($primary-stylename: v-table) { + .#{$primary-stylename}-header-wrap { + display: none; + } +} + +@mixin v-valo-table-borderless ($primary-stylename: v-table) { + .#{$primary-stylename}-header-wrap, + .#{$primary-stylename}-footer-wrap, + .#{$primary-stylename}-header-drag, + .#{$primary-stylename}-body { + border: none; + } +} diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss new file mode 100644 index 0000000000..af608c8e1d --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss @@ -0,0 +1,335 @@ +$v-tabsheet-content-animation-enabled: $v-animations-enabled !default; + + + + +@mixin v-valo-tabsheet-global ($primary-stylename: v-tabsheet) { + .#{$primary-stylename}-hidetabs > .#{$primary-stylename}-tabcontainer, + .#{$primary-stylename}-spacertd, + .#{$primary-stylename}-deco, + .v-disabled .#{$primary-stylename}-scroller, + .#{$primary-stylename} .v-disabled .#{$primary-stylename}-caption-close { + display: none; + } + + .#{$primary-stylename}-content { + position: relative; + } + +} + + + + + +@mixin v-valo-tabsheet ($primary-stylename: v-tabsheet) { + + $_scale: if( is-dark-color($v-app-background-color) , max(5%, $v-bevel-depth/2), min(-5%, -$v-bevel-depth/2) ); + $border-color: scale-color($v-app-background-color, $lightness: $_scale); + + .#{$primary-stylename} { + &:not(.v-has-width) { + width: auto !important; + } + } + + .#{$primary-stylename}-spacertd { + display: none !important; + } + + .#{$primary-stylename}-tabcontainer { + position: relative; + line-height: $v-unit-size; + @include user-select(none);; + + table, + tbody, + tr { + display: inline-block; + border-spacing: 0; + border-collapse: collapse; + vertical-align: top; + } + + td { + display: inline-block; + padding: 0; + } + + &:before { + content: ""; + position: absolute; + height: $v-border-width; + background: $border-color; + bottom: 0; + left: 0; + right: 0; + } + } + + .#{$primary-stylename}-tabs { + height: $v-unit-size; + position: relative; + white-space: nowrap; + @include box-sizing(border-box); + + .v-caption { + height: $v-unit-size; + 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: $v-font-size; + font-weight: $v-font-weight; + width: auto !important; + + @if $v-animations-enabled { + @include transition(border-bottom 200ms, color 200ms); + } + + .v-icon { + cursor: inherit; + } + + .v-icon + .v-captiontext { + margin-left: round($v-unit-size/4); + } + + &:hover { + color: v-valo-selection-color(); + } + + &.v-disabled { + @include opacity($v-disabled-opacity); + cursor: default; + color: inherit !important; + border-bottom: none; + } + } + + td:first-child .v-caption, + [aria-hidden="true"] + td .v-caption { + margin-left: 0; + } + } + + .#{$primary-stylename}-tabitemcell:focus { + outline: none; + + .v-caption { + color: v-valo-selection-color(); + border-bottom: $v-border-width solid v-valo-selection-color(); + } + } + + .#{$primary-stylename}-tabitem-selected .v-caption.v-caption { + border-bottom: $v-border-width*2 solid v-valo-selection-color(); + color: v-valo-selection-color(); + } + + .#{$primary-stylename}-caption-close { + display: inline-block; + font-size: 1.2em; + line-height: 1; + vertical-align: middle; + padding: round($v-font-size/8) round($v-font-size/4); + margin: round($v-font-size/-8) round($v-font-size/-4) round($v-font-size/-8) round($v-font-size/4); + border-radius: round($v-border-radius/2); + + &:hover { + background: v-valo-selection-color(); + color: v-valo-font-color(v-valo-selection-color()); + } + + &:active { + background: darken(v-valo-selection-color(), 5%); + color: v-valo-font-color(v-valo-selection-color()); + } + } + + .#{$primary-stylename}-scroller { + position: absolute; + right: 0; + top: 0; + padding-left: round($v-unit-size/2); + @include linear-gradient(to left, $v-app-background-color 70%, rgba($v-app-background-color, 0) 100%, $fallback: transparent); + pointer-events: none; + line-height: $v-unit-size; + + &:after { + content: ""; + height: $v-border-width; + 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-app-background-color; + + &:after { + background-color: $border-color; + } + } + + button { + @include appearance(none); + border: none; + background: transparent; + font: inherit; + color: inherit; + height: $v-unit-size; + line-height: $v-unit-size; + 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-valo-selection-color(); + } + + &:active { + @include opacity(.7); + color: v-valo-selection-color(); + } + + &::-moz-focus-inner { + padding: 0; + border: 0 + } + } + + [class*="Next"] { + padding-left: round($v-unit-size/8); + &:before { + @include v-valo-tabsheet-scroller-next-icon-style; + } + } + + [class*="Prev"] { + padding-right: round($v-unit-size/8); + &:before { + @include v-valo-tabsheet-scroller-prev-icon-style; + } + } + + [class*="disabled"] { + cursor: default; + color: inherit !important; + @include opacity(.1, true); + } + } + + + @if $v-tabsheet-content-animation-enabled { + .#{$primary-stylename}-tabsheetpanel > .v-scrollable > .v-widget { + @include v-valo-anim-fade-in(300ms); + } + } + +} + + + + + +@mixin v-valo-tabsheet-centered-tabs ($primary-stylename: v-tabsheet) { + .#{$primary-stylename}-tabcontainer { + text-align: center; + } +} + +@mixin v-valo-tabsheet-equal-width-tabs ($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; + //width: 100% !important; + } + + .v-caption { + margin: 0; + display: block; + } + } +} + +@mixin v-valo-tabsheet-icons-on-top ($primary-stylename: v-tabsheet) { + .#{$primary-stylename}-tabs { + height: $v-unit-size * 2; + + .v-caption { + height: $v-unit-size * 2; + padding-top: $v-unit-size; + } + + .v-icon { + display: block; + font-size: $v-font-size * 2; + $_offset: round($v-unit-size/4); + margin: -($v-unit-size - $_offset) auto #{-$_offset}; + min-height: $v-unit-size; + + + .v-captiontext.v-captiontext { + margin-left: 0; + } + } + } + + .#{$primary-stylename}-scroller { + line-height: $v-unit-size*2; + + button[class] { + padding: 0 round($v-unit-size/4); + display: block; + } + } +} + +@mixin v-valo-tabsheet-only-selected-closable ($primary-stylename: v-tabsheet) { + .#{$primary-stylename}-caption-close { + visibility: hidden; + } + + .#{$primary-stylename}-tabitem-selected .#{$primary-stylename}-caption-close { + visibility: visible; + } +} + +@mixin v-valo-tabsheet-padded-tabbar ($primary-stylename: v-tabsheet) { + .#{$primary-stylename}-tabs { + padding: 0 round($v-unit-size/4); + } +} + +@mixin v-valo-tabsheet-scroller-prev-icon-style { + font-family: FontAwesome; + content: "\f053"; +} + +@mixin v-valo-tabsheet-scroller-next-icon-style { + font-family: FontAwesome; + content: "\f054"; +} diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss new file mode 100644 index 0000000000..00226adcaf --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss @@ -0,0 +1,29 @@ +@mixin v-valo-textarea ($primary-stylename: v-textarea) { + + .#{$primary-stylename} { + @include v-valo-textarea-style; + width: $v-default-field-width; + } + + .#{$primary-stylename}-readonly { + @include v-valo-textfield-readonly-style; + } + +} + + +@mixin v-valo-textarea-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, + $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth, + $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius, + $background-color: $v-textfield-background-color) { + + $unit-size: $unit-size or $v-unit-size; + + @include v-valo-textfield-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, + $shadow-style: $shadow-style, $shadow-depth: $shadow-depth, + $unit-size: $unit-size, $border-radius: $border-radius, + $background-color: $background-color); + display: block; // Fixes extra white-space under the textarea element + height: auto; + resize: none; +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss new file mode 100644 index 0000000000..14f9535d41 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -0,0 +1,219 @@ +$v-textfield-bevel-style: inset 0 1px 0 shade, 0 1px 0 hilite !default; +$v-textfield-bevel-depth: $v-bevel-depth !default; +$v-textfield-shadow-style: none !default; +$v-textfield-shadow-depth: $v-shadow-depth !default; +$v-textfield-background-color: null !default; +$v-textfield-unit-size: null !default; +$v-textfield-font-weight: 400 !default; +$v-textfield-font-size: $v-font-size !default; +$v-textfield-border-width: $v-border-width !default; +$v-textfield-border-radius: $v-border-radius !default; +$v-textfield-disabled-opacity: $v-disabled-opacity !default; + + + +@function v-valo-textfield-background-color ($context) { + $bg-color: lighten($context, 8%); + @if is-dark-color($context) { + $bg-color: darken($context, 4%); + } + @return $bg-color; +} + + + + + +@function v-valo-textfield-box-shadow ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, + $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth) { + @if $bevel-depth == 0 and $shadow-depth == 0 { + @return null; + } + $_bevel: v-valo-replace-hilite-and-shade($bevel-style, white($bevel-depth/500%), black($bevel-depth/500%)); + $_shadow: v-valo-shadow($shadow-style: $shadow-style, $shadow-depth: $shadow-depth); + + @if $_bevel and $_shadow { + @return $_bevel, $_shadow; + } @else if $_bevel { + @return $_bevel; + } @else if $_shadow { + @return $_shadow; + } @else { + @return null; + } + +} + + + + +@mixin v-valo-textfield-size ($unit-size: $v-unit-size, $border-radius: $v-textfield-border-radius) { + height: $unit-size; + $padding-width: ceil($unit-size/6); + @if $border-radius { + $padding-width: $padding-width + ceil($border-radius/3); + } + padding: ceil($unit-size/9) $padding-width; +} + + + +@function v-valo-textfield-border-color ($bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth, + $background-color: $v-textfield-background-color) { + $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color); + $border-color: if(color-luminance($background-color) < color-luminance($v-app-background-color), $background-color, $v-app-background-color); + $border-color: blend-darken($border-color, scale-color($border-color, $lightness: max(-50%, -$bevel-depth/2))); + $border-color: scale-color($border-color, $saturation: -$bevel-depth/2); + @return $border-color; +} + + + + +@mixin v-valo-textfield-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, + $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth, + $unit-size: $v-textfield-unit-size, $border-radius: $v-textfield-border-radius, + $background-color: $v-textfield-background-color) { + + $background-color: $background-color or v-valo-textfield-background-color($v-app-background-color); + $unit-size: $unit-size or $v-unit-size; + + @include appearance(none); + margin: 0; + font: inherit; + font-size: if($v-textfield-font-size != $v-font-size, $v-textfield-font-size, null); + font-weight: $v-textfield-font-weight; + @include v-valo-textfield-size($unit-size, $border-radius); + border-radius: $border-radius; + border: $v-textfield-border-width solid v-valo-textfield-border-color($bevel-style, $bevel-depth, $background-color); + background: $background-color; + color: v-valo-font-color($background-color); + box-shadow: v-valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth); + + @if $v-animations-enabled { + @include transition(box-shadow 180ms, border 180ms); + } + + &.v-disabled { + @include opacity($v-textfield-disabled-opacity); + } + + &:focus { + @include v-valo-textfield-focus-style($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth); + } + + // TODO allow parent selector to be used in interpolation + &.v-textfield-prompt, + &.v-textarea-prompt { + @include v-valo-textfield-prompt-style($background-color); + } + +} + + +@mixin v-valo-textfield-prompt-style ($background-color) { + $font-color: v-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 v-valo-textfield-focus-style ($bevel-style: $v-textfield-bevel-style, $bevel-depth: $v-textfield-bevel-depth, + $shadow-style: $v-textfield-shadow-style, $shadow-depth: $v-textfield-shadow-depth) { + outline: none; + @if $v-animations-enabled { + @include transition(none); + } + + $focus-color: v-valo-focus-color(); + + @if color-luminance($focus-color) + 50 < color-luminance($v-app-background-color) { + border-color: $focus-color; + } + + box-shadow: v-valo-textfield-box-shadow($bevel-style: $bevel-style, $bevel-depth: $bevel-depth, $shadow-style: $shadow-style, $shadow-depth: $shadow-depth), + v-valo-focus-box-shadow($color: $focus-color); +} + + +@mixin v-valo-textfield-readonly-style { + background: transparent; + box-shadow: none; + &:focus { + box-shadow: v-valo-focus-box-shadow(); + } +} + + +@mixin v-valo-textfield ($primary-stylename: v-textfield) { + + .#{$primary-stylename} { + @include v-valo-textfield-style; + width: $v-default-field-width; + } + + .#{$primary-stylename}-readonly { + @include v-valo-textfield-readonly-style; + } + +} + + + +@mixin v-valo-textfield-borderless-style ($background-color: transparent) { + border: none; + border-radius: 0; + background: $background-color; + box-shadow: none; + + &:focus { + box-shadow: none; + } +} + + + +@mixin v-valo-textfield-inline-icon($primary-stylename: v-textfield, $stylename: inline-icon, $unit-size: $v-unit-size, $font-size: $v-textfield-font-size, $image-icon-size: 16px) { + .v-slot-#{$stylename} { + position: relative; + } + + .v-caption-#{$stylename} { + padding: 0; + + .v-captiontext { + @include v-valo-caption-style; + margin: 0; + } + + .v-icon { + position: absolute; + z-index: 10; + } + + // Font icons + span.v-icon { + left: $v-textfield-border-width; + bottom: $v-textfield-border-width; + width: $unit-size; + line-height: $unit-size - $v-textfield-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); + } + } + + .#{$primary-stylename}-#{$stylename}, + .v-textarea-#{$stylename} { + 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..0dcabbcf84 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_tree.scss @@ -0,0 +1,253 @@ +$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(v-valo-tree-node-open) { + 0% { + max-height: 0; + } + 100% { + max-height: $v-tree-row-height * 10; + } + } + + @include keyframes(v-valo-tree-node-close) { + 0% { + max-height: $v-tree-row-height * 10; + } + 100% { + max-height: 0; + } + } +} + + +@mixin v-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; + + .v-ie8 & { + content: "+"; + position: static; + margin-left: -1.9em; + //background: red; + vertical-align: top; + @include v-valo-tree-collapsed-icon-style; + text-align: center; + } + } + + .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 v-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 v-valo-tree-expanded-icon-style; + + @if $v-tree-animations-enabled { + @include transform(rotate(90deg)); + @include v-valo-tree-collapsed-icon-style; + } + } + + .v-ie8 & .#{$primary-stylename}-node-expanded:before { + @include v-valo-tree-expanded-icon-style(true); + } + + + + .#{$primary-stylename}-node-focused { + // This a v-tree-node-caption element + &:after { + opacity: 1; + border: 1px solid v-valo-focus-color(); + } + } + + + + .#{$primary-stylename}-node-selected { + color: v-valo-font-color(v-valo-selection-color(), 0.9); + text-shadow: v-valo-button-text-shadow(v-valo-selection-color(), $v-bevel-depth); + + &:after { + opacity: 1; + @include v-valo-gradient(v-valo-selection-color()); + border: none; + + .v-ie8 & { + //visibility: visible; + } + } + + .v-ie8 & { + @include v-valo-gradient(v-valo-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(v-valo-tree-node-close 400ms ease-out forwards); + display: block !important; + } + + .#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-children { + @include animation(v-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-valo-focus-color(); + font-size: $v-font-size * 2; + line-height: 2px; + color: v-valo-focus-color(); + text-indent: round($v-font-size/-4); + text-shadow: 0 0 1px $v-app-background-color, 0 0 1px $v-app-background-color; + } + + .#{$primary-stylename}-node-caption-drag-center { + box-shadow: 0 0 0 2px v-valo-focus-color(); + position: relative; + border-radius: $v-border-radius; + + .v-ie8 & { + outline: 2px solid v-valo-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 v-valo-tree-collapsed-icon-style { + content: "\f0da"; + font-family: FontAwesome; +} + +@mixin v-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..a4083a1901 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_treetable.scss @@ -0,0 +1,27 @@ +@mixin v-valo-treetable ($primary-stylename: v-treetable) { + .v-table-cell-wrapper { + //position: relative; + } + + .#{$primary-stylename}-treespacer { + display: inline-block; + background: transparent; + width: round($v-unit-size/2); + //left: round($v-unit-size/-8); + left: 0; + position: absolute; + text-align: right; + + &:before { + + } + } + + .#{$primary-stylename}-node-closed:before { + @include v-valo-tree-collapsed-icon-style; + } + + .#{$primary-stylename}-node-open:before { + @include v-valo-tree-expanded-icon-style($force: true); + } +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/valo/components/_twincolselect.scss b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss new file mode 100644 index 0000000000..e2951802bc --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss @@ -0,0 +1,90 @@ +@mixin v-valo-twincolselect ($primary-stylename: v-select-twincol) { + + .#{$primary-stylename} { + white-space: normal; + + select { + @include v-valo-nativeselect-select-style; + } + + &:not(.v-has-width) { + width: auto !important; + } + + .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 v-valo-caption-style; + } + + .#{$primary-stylename}-buttons { + white-space: nowrap; + display: inline-block; + vertical-align: top; + position: relative; + min-width: 3.5em; + + .v-button { + @include v-valo-widget-style; + position: absolute; + left: round($v-unit-size/4); + right: round($v-unit-size/4); + top: $v-unit-size - $v-button-border-width; + padding: 0; + text-align: center; + + &:first-child { + top: 0; + } + } + + .v-button-caption { + display: none; + } + + .v-button:focus { + z-index: 1; + } + + @if $v-button-border-radius > 0 { + .v-button:first-child { + border-radius: $v-button-border-radius $v-button-border-radius 0 0; + } + + .v-button:last-child { + border-radius: 0 0 $v-button-border-radius $v-button-border-radius; + } + } + + .v-button-wrap:before { + @include v-valo-twincolselect-remove-icon-style; + } + + .v-button:first-child .v-button-wrap:before { + @include v-valo-twincolselect-add-icon-style; + } + } + +} + + + +@mixin v-valo-twincolselect-add-icon-style { + font-family: FontAwesome; + content: "\f054"; +} + +@mixin v-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..14a4501966 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_upload.scss @@ -0,0 +1,5 @@ +@mixin v-valo-upload ($primary-stylename: v-upload) { + .#{$primary-stylename} .v-button { + @include v-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..fe41bd2f35 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_widget.scss @@ -0,0 +1,26 @@ +// +// @mixin v-valo-widget-style +@mixin v-valo-widget-style { + // Baseline expectations for all Vaadin widgets + @include box-sizing(border-box); + display: inline-block; + + // 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; + + // This is needed to overcome issues with line-boxes (i.e. block elements + // with inline elements as children, whose height is less than the parent's line-height) + // See: http://stackoverflow.com/questions/3003051/why-does-the-html5-doctype-mess-with-my-padding + // In order to avoid specifying font-size: 0; for all component containers, we need to avoid adding + // vertical-align: top/middle/bottom to any component by default, which will mess up the spacing. + line-height: $v-line-height; +} + + +@mixin v-valo-widget { + .v-widget { + @include v-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..a006ca1361 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/components/_window.scss @@ -0,0 +1,273 @@ +$v-window-border-radius: null !default; +$v-window-shadow-style: 0 4px 12px 6px rgba(0,0,0, $v-shadow-depth/100%), $v-overlay-shadow-style !default; +$v-window-open-animation: null !default; +$v-window-animations-enabled: $v-animations-enabled !default; + + +@if $v-window-animations-enabled { + @include keyframes(v-valo-modal-window-indication) { + 0% { opacity: 0; } + 100% { opacity: 1; } + } +} + + +@mixin v-valo-window ($primary-stylename: v-window) { + + .#{$primary-stylename} { + @include v-valo-overlay-style; + + @if $v-window-animations-enabled and $v-window-open-animation { + @include animation($v-window-open-animation); + } + + @if $v-window-shadow-style { + @if $v-window-shadow-style == none { + box-shadow: none; + } @else { + box-shadow: v-valo-shadow($shadow-style: $v-window-shadow-style); + } + } + border-radius: $v-window-border-radius; + padding: 0; + min-width: 4*$v-unit-size !important; + min-height: $v-unit-size !important; + overflow: hidden !important; + white-space: nowrap; + + @if $v-window-animations-enabled { + @include transition(width 200ms, height 200ms, top 200ms, left 200ms); + } + } + + .#{$primary-stylename}-modalitycurtain { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: $v-app-background-color; + @include opacity(.3); + } + + .#{$primary-stylename}-draggingCurtain { + position: fixed !important; + } + + .#{$primary-stylename}-resizingCurtain + .v-window, + .#{$primary-stylename}-draggingCurtain + .v-window { + @include transition(none); + } + + .#{$primary-stylename}-outerheader { + position: absolute; + z-index: 2; + top: 0; + left: 0; + right: 0; + //height: $v-unit-size - 1px; + // Raise above the window content, if that is ever promoted to a layer + @include transform(translatez(0)); + + &:after { + content: ""; + position: absolute; + bottom: -1px; + right: 0; + left: 0; + height: 1px; + $_bg: v-valo-overlay-background-color(); + background: adjust-color($_bg, $lightness: if(is-dark-color($_bg), 3%, -5%), $saturation: -10%); + } + } + + .#{$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(v-valo-font-color(v-valo-overlay-background-color()), .7), v-valo-overlay-background-color()); + } + + .#{$primary-stylename}-closebox, + .#{$primary-stylename}-maximizebox, + .#{$primary-stylename}-restorebox { + position: absolute; + z-index: 2; + top: 0; + right: 0; + width: $v-unit-size; + height: $v-unit-size - 1px; + line-height: $v-unit-size - 3px; + text-align: center; + cursor: pointer; + font-family: FontAwesome; + font-size: round($v-font-size * 1.3); + @include opacity(.4); + @if $v-animations-enabled { + @include transition(all 140ms); + } + + &:focus { + outline: none; + } + + &:hover { + @include opacity(1); + color: v-valo-selection-color(); + } + + &:active { + color: inherit; + } + } + + .#{$primary-stylename}-closebox { + @include v-valo-window-close-icon-style; + } + + .#{$primary-stylename}-maximizebox, + .#{$primary-stylename}-restorebox { + right: $v-unit-size; + } + + .#{$primary-stylename}-restorebox-disabled, + .#{$primary-stylename}-maximizebox-disabled { + display: none; + } + + .#{$primary-stylename}-maximizebox { + @include v-valo-window-maximize-icon-style; + } + + .#{$primary-stylename}-restorebox { + @include v-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 v-valo-panel-adjust-content-margins; + + > .v-formlayout { + @include v-valo-formlayout-margins($all: round($v-unit-size/3)); + } + + position: relative; + + &:focus { + outline: none; + } + + &:before { + content: ""; + position: absolute; + z-index: 2; + top: 0; + height: 1px; + background: v-valo-overlay-background-color(); + left: 0; + right: 0; + } + } + } + + .#{$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}-bottom-toolbar { + padding: round($v-unit-size/5) round($v-unit-size/3); + background: $v-app-background-color; + + .v-expand { + overflow: visible; + } + + .v-label { + line-height: $v-unit-size - 1px; + } + + .v-spacing { + width: round($v-layout-spacing-horizontal/2); + } + } + + .v-margin-left.v-margin-right.v-margin-bottom { + .#{$primary-stylename}-bottom-toolbar { + margin: 0 round($v-unit-size/-3) round($v-unit-size/-3); + @include box-sizing(content-box); + } + } + +} + + +@mixin v-valo-window-close-icon-style { + &:before { + // times cross + content: "\00d7"; + } +} + +@mixin v-valo-window-maximize-icon-style { + &:before { + content: "+"; + } +} + +@mixin v-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 |
