diff options
Diffstat (limited to 'WebContent/VAADIN/themes/base')
| -rw-r--r-- | WebContent/VAADIN/themes/base/base.scss | 26 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/base/common/mixins.scss | 20 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/base/escalator/escalator.scss | 135 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/base/grid/grid.scss | 272 |
4 files changed, 441 insertions, 12 deletions
diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss index 3570c5efec..d40ac1a7bf 100644 --- a/WebContent/VAADIN/themes/base/base.scss +++ b/WebContent/VAADIN/themes/base/base.scss @@ -1,3 +1,11 @@ +$font-size: 16px !default; +$line-height: normal !default; + +// Provide these so that we can use them in base mixins +// and so that we can use base mixins in Valo +$v-font-size: $font-size !default; +$v-line-height: $line-height !default; + @import "common/mixins.scss"; @import "absolutelayout/absolutelayout.scss"; @import "accordion/accordion.scss"; @@ -16,8 +24,10 @@ @import "inlinedatefield/inlinedatefield.scss"; @import "dragwrapper/dragwrapper.scss"; @import "embedded/embedded.scss"; +@import "escalator/escalator.scss"; @import "fonts/fonts.scss"; @import "formlayout/formlayout.scss"; +@import "grid/grid.scss"; @import "gridlayout/gridlayout.scss"; @import "label/label.scss"; @import "link/link.scss"; @@ -59,16 +69,14 @@ overflow: hidden; } -$font-size: 16px; -$line-height: normal; @mixin base { // @include base-app; - + // everything included from base theme // other themes should enclose corresponding definitions in theme selectors - + @include base-widget; - + @include base-absolutelayout; @include base-accordion; @include base-browserframe; @@ -78,10 +86,10 @@ $line-height: normal; @include base-caption; @include base-colorpicker; @include base-calendar; - + // here for now to preserve old semantics @include base-common; - + @include base-layout; @include base-csslayout; @include base-customcomponent; @@ -90,7 +98,9 @@ $line-height: normal; @include base-inline-datefield; @include base-dragwrapper; @include base-embedded; + @include base-escalator; @include base-formlayout; + @include base-grid; @include base-gridlayout; @include base-label; @include base-link; @@ -103,7 +113,7 @@ $line-height: normal; @include base-progressindicator(v-progressbar); /* For legacy ProgressIndicator component */ @include base-progressindicator(v-progressindicator); - + @include base-select; @include base-shadow; @include base-slider; diff --git a/WebContent/VAADIN/themes/base/common/mixins.scss b/WebContent/VAADIN/themes/base/common/mixins.scss index 79d26d6c16..fab97e9565 100644 --- a/WebContent/VAADIN/themes/base/common/mixins.scss +++ b/WebContent/VAADIN/themes/base/common/mixins.scss @@ -1,5 +1,5 @@ @mixin keyframes ($name) { - @-webkit-keyframes #{$name} { + @-webkit-keyframes #{$name} { @content; } @-moz-keyframes #{$name} { @@ -11,7 +11,19 @@ } @mixin animation ($anim) { - -webkit-animation: $anim; - -moz-animation: $anim; - animation: $anim; + -webkit-animation: $anim; + -moz-animation: $anim; + animation: $anim; +} + +@mixin box-shadow ($shadow) { + -webkit-box-shadow: $shadow; + -moz-box-shadow: $shadow; + box-shadow: $shadow; +} + +@mixin box-sizing ($box-sizing) { + -webkit-box-sizing: $box-sizing; + -moz-box-sizing: $box-sizing; + box-sizing: $box-sizing; } diff --git a/WebContent/VAADIN/themes/base/escalator/escalator.scss b/WebContent/VAADIN/themes/base/escalator/escalator.scss new file mode 100644 index 0000000000..ad09207ce0 --- /dev/null +++ b/WebContent/VAADIN/themes/base/escalator/escalator.scss @@ -0,0 +1,135 @@ +@mixin base-escalator($primaryStyleName: v-escalator, $background-color: #fff) { + + .#{$primaryStyleName} { + position: relative; + } + + .#{$primaryStyleName}-scroller { + position: absolute; + z-index: 20; + outline: none; + @include box-sizing(border-box); + } + + .#{$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; + @include box-sizing(border-box); + } + + .#{$primaryStyleName}-tablewrapper > table { + border-spacing: 0; + table-layout: fixed; + width: inherit; // a decent default fallback + } + + .#{$primaryStyleName}-header-deco, + .#{$primaryStyleName}-footer-deco { + position: absolute; + right: 0; + @include box-sizing(border-box); + } + + .#{$primaryStyleName}-horizontal-scrollbar-deco { + position: absolute; + bottom: 0; + left: 0; + right: 0; + @include box-sizing(border-box); + } + + .#{$primaryStyleName}-header, + .#{$primaryStyleName}-body, + .#{$primaryStyleName}-footer { + position: absolute; + left: 0; + width: inherit; + z-index: 10; + } + + .#{$primaryStyleName}-header, + .#{$primaryStyleName}-header-deco { + top: 0; + } + + .#{$primaryStyleName}-footer, + .#{$primaryStyleName}-footer-deco { + bottom: 0; + } + + .#{$primaryStyleName}-body { + z-index: 0; + top: 0; + + .#{$primaryStyleName}-row { + position: absolute; + top: 0; + left: 0; + } + } + + .#{$primaryStyleName}-row { + display: block; + + .v-ie8 &, .v-ie9 & { + // Neither IE8 nor IE9 let table rows be longer than tbody, with only + // "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; + padding: 2px; + white-space: nowrap; + @include box-sizing(border-box); + overflow: hidden; + + // Because Vaadin changes the font size after the initial render, we + // need to mention the font size here explicitly, otherwise automatic + // row height detection gets broken. + + font-size: $v-font-size; + } + + .#{$primaryStyleName}-cell.frozen { + position: relative; + z-index: 1; + } + +} diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss new file mode 100644 index 0000000000..ed068a5efc --- /dev/null +++ b/WebContent/VAADIN/themes/base/grid/grid.scss @@ -0,0 +1,272 @@ +$v-grid-border: 1px solid #ddd !default; +$v-grid-cell-vertical-border: $v-grid-border !default; +$v-grid-cell-horizontal-border: $v-grid-cell-vertical-border !default; +$v-grid-cell-focused-border: 1px solid !default; +$v-grid-header-border: $v-grid-border !default; +$v-grid-footer-border: $v-grid-header-border !default; + +$v-grid-row-height: round($v-font-size * 1.5) !default; +$v-grid-row-background-color: #fff !default; +$v-grid-row-stripe-background-color: darken($v-grid-row-background-color, 5%) !default; +$v-grid-row-selected-background-color: darken($v-grid-row-background-color, 25%) !default; +$v-grid-row-focused-background-color: null !default; + +$v-grid-header-row-height: null !default; +$v-grid-header-font-size: $v-font-size !default; +$v-grid-header-background-color: $v-grid-row-background-color !default; + +$v-grid-footer-row-height: $v-grid-header-row-height !default; +$v-grid-footer-font-size: $v-grid-header-font-size !default; +$v-grid-footer-background-color: $v-grid-header-background-color !default; + +$v-grid-cell-padding-horizontal: 5px !default; + +$v-grid-editor-background-color: $v-grid-row-background-color !default; + + +@import "../escalator/escalator"; + + +@mixin base-grid($primaryStyleName: v-grid) { + + @include base-escalator($primaryStyleName: $primaryStyleName, $background-color: $v-grid-row-background-color); + + .#{$primaryStyleName} { + outline: none; + } + + .#{$primaryStyleName}-scroller-vertical, + .#{$primaryStyleName}-scroller-horizontal { + border: $v-grid-border; + } + + .#{$primaryStyleName}-scroller-vertical { + border-left: none; + } + + .#{$primaryStyleName}-scroller-horizontal { + border-top: none; + } + + .#{$primaryStyleName}-tablewrapper { + border: $v-grid-border; + } + + // Common cell styles + + .#{$primaryStyleName}-cell { + background-color: $v-grid-row-background-color; + padding: 0 $v-grid-cell-padding-horizontal; + line-height: $v-grid-row-height; + text-overflow: ellipsis; + + > * { + line-height: $v-line-height; + vertical-align: middle; + } + + // Force div elements to inline-blocks by default to enable vertical centering + > div { + display: inline-block; + } + + &.frozen { + @include box-shadow(1px 0 2px rgba(0,0,0,.1)); + border-right: $v-grid-cell-vertical-border; + + @if $v-grid-cell-vertical-border and $v-grid-cell-vertical-border != none { + + th, + + td { + border-left: none; + } + } + } + } + + // Rows + + .#{$primaryStyleName}-row > td { + border-left: $v-grid-cell-vertical-border; + border-bottom: $v-grid-cell-horizontal-border; + + &:first-child { + border-left: none; + } + } + + .#{$primaryStyleName}-row-stripe > td { + background-color: $v-grid-row-stripe-background-color; + } + + .#{$primaryStyleName}-row-selected > td { + background: $v-grid-row-selected-background-color; + } + + .#{$primaryStyleName}-row-focused > td { + background-color: $v-grid-row-focused-background-color; + } + + // Header + + .#{$primaryStyleName}-header { + th { + position: relative; + background-color: $v-grid-header-background-color; + font-size: $v-grid-header-font-size; + font-weight: inherit; + border-left: $v-grid-header-border; + border-bottom: $v-grid-header-border; + line-height: $v-grid-header-row-height; + text-align: left; + + &:first-child { + border-left: none; + } + } + + .sort-asc, + .sort-desc { + padding-right: round($v-grid-header-font-size * 1.2) + $v-grid-cell-padding-horizontal; + + &:after { + font-family: FontAwesome, sans-serif; + content: "\f0de" " " attr(sort-order); + position: absolute; + right: $v-grid-cell-padding-horizontal; + font-size: round($v-grid-header-font-size * 0.85); + } + } + + .sort-desc:after { + content: "\f0dd" " " attr(sort-order); + } + } + + // Footer + + .#{$primaryStyleName}-footer { + td { + background-color: $v-grid-footer-background-color; + font-size: $v-grid-footer-font-size; + font-weight: inherit; + border-left: $v-grid-footer-border; + border-top: $v-grid-footer-border; + border-bottom: none; + line-height: $v-grid-footer-row-height; + + &:first-child { + border-left: none; + } + } + } + + // Decorative elements + + .#{$primaryStyleName}-header-deco { + border-top: $v-grid-header-border; + border-right: $v-grid-header-border; + background-color: $v-grid-header-background-color; + } + + .#{$primaryStyleName}-footer-deco { + border-bottom: $v-grid-footer-border; + border-right: $v-grid-footer-border; + background-color: $v-grid-footer-background-color; + } + + .#{$primaryStyleName}-horizontal-scrollbar-deco { + background-color: $v-grid-footer-background-color; + border: $v-grid-footer-border; + border-top: none; + } + + // Focused cell style (common for all cells) + + .#{$primaryStyleName}-cell-focused { + position: relative; + + &:before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border: $v-grid-cell-focused-border; + display: none; + pointer-events: none; + } + + // IE 8-10 apply "pointer-events" only to SVG elements. + // Using an empty SVG instead of an empty text node makes IE + // obey the "pointer-events: none" and forwards click events + // to the underlying element. The data decodes to: + // <svg xmlns="http://www.w3.org/2000/svg"></svg> + .ie8 &:before, + .ie9 &:before, + .ie10 &:before { + content: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==); + } + } + + .#{$primaryStyleName}:focus .#{$primaryStyleName}-cell-focused:before { + display: block; + } + + .#{$primaryStyleName}.v-disabled:focus .#{$primaryStyleName}-cell-focused:before { + // Disabled Grid should not show cell focus outline + display: none; + } + + // Editor + + .#{$primaryStyleName}-editor { + // TODO should be fixed in offset calculations + margin-top: -1px; + position: absolute; + overflow-y: visible; + background: $v-grid-editor-background-color; + @include box-shadow(0 0 10px 1px rgba(0,0,0,.3)); + + > div { + position: absolute; + @include box-sizing(border-box); + border-left: $v-grid-cell-vertical-border; + + &:first-child { + border-left: none; + } + + .v-textfield, + .v-datefield, + .v-filterselect { + min-width: 100%; + max-width: 100%; + min-height: 100%; + max-height: 100%; + border: none; + border-radius: 0; + } + + .v-textfield-focus, + .v-filterselect-focus input { + position: relative; + z-index: 1; + } + } + } + + .#{$primaryStyleName}-editor-save, + .#{$primaryStyleName}-editor-cancel { + position: absolute; + // TODO remove the inline size from the widgets + width: auto !important; + height: auto !important; + } + + // Renderers + + .#{$primaryStyleName}-cell > .v-progressbar { + width: 100%; + } +} |