diff options
Diffstat (limited to 'WebContent/VAADIN/themes')
| -rw-r--r-- | WebContent/VAADIN/themes/base/base.scss | 22 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/base/common/mixins.scss | 18 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/base/escalator/escalator.scss | 268 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/base/grid/grid.scss | 298 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/chameleon/chameleon.scss | 5 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/reindeer/grid/grid.scss | 213 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/reindeer/reindeer.scss | 24 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/runo/grid/grid.scss | 228 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/runo/runo.scss | 30 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/valo/components/_grid.scss | 313 |
10 files changed, 597 insertions, 822 deletions
diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss index 6263646ce1..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"; @@ -61,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; @@ -80,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; @@ -107,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..ee00f644fa 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,17 @@ } @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; + box-shadow: $shadow; +} + +@mixin box-sizing ($box-sizing) { + -webkit-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 index c5b5d24fa4..ad09207ce0 100644 --- a/WebContent/VAADIN/themes/base/escalator/escalator.scss +++ b/WebContent/VAADIN/themes/base/escalator/escalator.scss @@ -1,137 +1,135 @@ -@mixin base-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}-headercorner, -.#{$primaryStyleName}-footercorner { - position: absolute; - right: 0; - border: 1px solid $border-color; - box-sizing: border-box; -} - -.#{$primaryStyleName}-headercorner { top: 0; } -.#{$primaryStyleName}-footercorner { bottom: 0; } - -.#{$primaryStyleName}-horizontalscrollbarbackground { - position: absolute; - bottom: 0; - width: 100%; -} - -.#{$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 &, .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; - border: 1px solid $border-color; - padding: 2px; - white-space: nowrap; - -moz-box-sizing: border-box; - 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: $font-size; -} - -.#{$primaryStyleName}-cell.frozen { - position: relative; - z-index: 1; -} +@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 index 341fea80b5..cb381236c1 100644 --- a/WebContent/VAADIN/themes/base/grid/grid.scss +++ b/WebContent/VAADIN/themes/base/grid/grid.scss @@ -1,61 +1,239 @@ -@mixin base-grid($primaryStyleName : v-grid) { - @include base-escalator($primaryStyleName); - - .#{$primaryStyleName} { - - th { - position: relative; - } - - th.sort-asc:after { - content: "\25B2" attr(sort-order); - position: absolute; - right: 5px; - } - - th.sort-desc:after { - content: "\25BC" attr(sort-order); - position: absolute; - right: 5px; - } - - .#{$primaryStyleName}-cell-active { - border-color: blue; - } - - .#{$primaryStyleName}-row-active > td { - background: rgb(244,244,244); - } - } - - .#{$primaryStyleName}-row > td { - background-color: #fff; - } - - .#{$primaryStyleName}-row-stripe > td { - background-color: #eee; - } - - .#{$primaryStyleName}-row-selected > td { - background: lightblue; - } - - .#{$primaryStyleName}-editor-row { - - position: absolute; - overflow-y: visible; - background: #EEE; - box-shadow: 0 0 5px; - - & > div { - position: absolute; - box-sizing: border-box; - border: 1px solid #CCC; - } - - .v-editor-row-save, - .v-editor-row-cancel { - position: absolute; - } - } +$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-active-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-active-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-row-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}-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; + } + + &.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-top: $v-grid-cell-horizontal-border; + + &:first-child { + border-left: none; + } + } + + tbody > .#{$primaryStyleName}-row:first-child > td { + border-top: 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-active > td { + background-color: $v-grid-row-active-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; + 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; + } + + // Active cell style (common for all cells) + + .#{$primaryStyleName}-cell-active { + position: relative; + + &:before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border: $v-grid-cell-active-border; + display: none; + } + } + + .#{$primaryStyleName}:focus .#{$primaryStyleName}-cell-active:before { + display: block; + } + + // Editor row + + .#{$primaryStyleName}-editor-row { + // TODO should be fixed in offset calculations + margin-top: -1px; + position: absolute; + overflow-y: visible; + background: $v-grid-editor-row-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; + } + } + + > .v-editor-row-save, + > .v-editor-row-cancel { + position: absolute; + // TODO remove the inline size from the widgets + width: auto !important; + height: auto !important; + } + } } diff --git a/WebContent/VAADIN/themes/chameleon/chameleon.scss b/WebContent/VAADIN/themes/chameleon/chameleon.scss index 95f81f69c1..b315678308 100644 --- a/WebContent/VAADIN/themes/chameleon/chameleon.scss +++ b/WebContent/VAADIN/themes/chameleon/chameleon.scss @@ -1,10 +1,11 @@ +$font-size: 13px !default; +$line-height: 1.4 !default; + @import "../base/base.scss"; @import "common/common.scss"; @import "components/components.scss"; @import "compound/compound.scss"; -$font-size: 13px; -$line-height: 1.4; @mixin chameleon { // TODO move this? @include base; diff --git a/WebContent/VAADIN/themes/reindeer/grid/grid.scss b/WebContent/VAADIN/themes/reindeer/grid/grid.scss index 09bc03ad73..397aa229cd 100644 --- a/WebContent/VAADIN/themes/reindeer/grid/grid.scss +++ b/WebContent/VAADIN/themes/reindeer/grid/grid.scss @@ -1,187 +1,60 @@ -@mixin reindeer-grid($primary-stylename : v-grid) { - - $grid-border-main: 1px solid #c2c3c4; - $grid-border-light: 1px solid #d4d4d4; - $grid-background-light: #d4d7d9; - - .#{$primary-stylename} { - outline: none; - } - - // Table wrapper - .#{$primary-stylename}-tablewrapper { - @include box-sizing(border-box); - border: $grid-border-light; - } - - // Grid header. - .#{$primary-stylename}-header, .#{$primary-stylename}-footer { - - .#{$primary-stylename}-cell { - background: $grid-background-light repeat-x; +// Variables defined in reindeer.scss + +@mixin reindeer-grid($primaryStyleName: v-grid) { + + .#{$primaryStyleName}-header, + .#{$primaryStyleName}-footer { + .#{$primaryStyleName}-cell { background-image: url(img/header-bg-light.png); - border: $grid-border-main; - border-right: none; color: #222; - font-size: 10px; font-weight: bold; - line-height: normal; - padding: 4px 4px 5px 6px; text-shadow: #f3f5f8 0 1px 0; text-transform: uppercase; - - &:first-child { - border-left: none; - } } - - .#{$primary-stylename}-cell-active { - border-right: 1px solid transparent; - border-color: #0f68ba; - padding-right: 3px; - } - - .#{$primary-stylename}-cell-active:first-child { - border-left: 1px solid #0f68ba; - padding-left: 5px; - } - - } - - .#{$primary-stylename}-cell.frozen { - /* TODO this probably should be a SCSS mixin */ - -webkit-box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1); - box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1); - } - - .#{$primary-stylename}-header { - border-top: none; } - - .#{$primary-stylename}-footer { - border-bottom: none; + + .#{$primaryStyleName}-header-deco, + .#{$primaryStyleName}-footer-deco, + .#{$primaryStyleName}-horizontal-scrollbar-deco { + background-image: url(img/header-bg-light.png); } - - // Grid body - .#{$primary-stylename}-body { - - // Rows - .#{$primary-stylename}-row-stripe > .#{$primary-stylename}-cell { - background-color: #eff0f1; - } - - // Cells - .#{$primary-stylename}-cell { - border: none; - border-left: 1px solid #d3d4d5; - padding: 3px 6px; - - &:first-child { - border-left: none; - - input[type="checkbox"] { - margin: 0; - } - } - } - - // Active state - .#{$primary-stylename}-row-active { - - .#{$primary-stylename}-cell { - background: #d6dfe9 url(img/focus-bg-light.png) repeat-x; - } - - .#{$primary-stylename}-cell-active { - border: 1px solid #0f68ba; - - // Adjust padding for 'active' borders. - padding: 2px 5px 2px 6px; - &:first-child { - padding-left: 5px; - } - } - } - - // Selected state - .#{$primary-stylename}-row-selected { - color: #fff; - text-shadow: #3b5a7a 0 1px 0; - - .#{$primary-stylename}-cell { - background: #4d749f url(../common/img/sel-bg.png) repeat-x; - border-color: #466c90; - } - - // Selected and focused - .#{$primary-stylename}-cell-active { - border-color: #b1cde4; - } + + // Selected row + .#{$primaryStyleName}-row-selected { + color: #fff; + text-shadow: #3b5a7a 0 1px 0; + + > .#{$primaryStyleName}-cell { + background: #4d749f url(../common/img/sel-bg.png) repeat-x; + border-color: #466c90; } - - .#{$primary-stylename}-row-active.#{$primary-stylename}-row-selected > .#{$primary-stylename}-cell { - background: #d6dfe9 url(img/focus-sel-bg-light.png) repeat-x; + + // Selected and active + > .#{$primaryStyleName}-cell-active:before { + border-color: #b1cde4; } } - + // Sort indicators - .#{$primary-stylename} th.sort-asc:after, - .#{$primary-stylename} th.sort-desc:after { - content: " " attr(sort-order); - position: absolute; - right: 5px; - background: transparent no-repeat right 7px; - width: 16px; - height: 12px; - top: 0px; - } - - .#{$primary-stylename} th.#{$primary-stylename}-cell-active:after, - .#{$primary-stylename} th.#{$primary-stylename}-cell-active:after { - right: 4px; - } - - .#{$primary-stylename} th.sort-asc:after { - background-image: url(img/desc-light.png); + .#{$primaryStyleName} th.sort-asc, + .#{$primaryStyleName} th.sort-desc { + padding-right: 16px + $v-grid-cell-padding-horizontal; + + &:after { + content: " " attr(sort-order); + background: transparent no-repeat right 7px; + width: 16px; + height: 12px; + top: 0; + } } - - .#{$primary-stylename} th.sort-desc:after { + + .#{$primaryStyleName} th.sort-asc:after { background-image: url(img/asc-light.png); } - - // Scrollbars - .#{$primary-stylename}-scroller { - @include box-sizing(border-box); - outline: none; - } - - .#{$primary-stylename}-scroller-vertical { - border-top: $grid-border-main; - border-bottom: $grid-border-light; - } - - .#{$primary-stylename}-scroller-horizontal { - border-left: $grid-border-light; - border-right: $grid-border-light; - } - - // Fillers - .#{$primary-stylename}-horizontalscrollbarbackground, - .#{$primary-stylename}-footercorner, - .#{$primary-stylename}-headercorner { - @include box-sizing(border-box); - background: $grid-background-light repeat-x; - background-image: url(img/header-bg-light.png); - border: $grid-border-light; - } - - .#{$primary-stylename}-footercorner { - border-top: none; + + .#{$primaryStyleName} th.sort-desc:after { + background-image: url(img/desc-light.png); } -} -@mixin box-sizing($value) { - box-sizing: $value; - -moz-box-sizing: $value; - -webkit-box-sizing: $value; -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/reindeer/reindeer.scss b/WebContent/VAADIN/themes/reindeer/reindeer.scss index b49e58c323..443f5cc7f3 100644 --- a/WebContent/VAADIN/themes/reindeer/reindeer.scss +++ b/WebContent/VAADIN/themes/reindeer/reindeer.scss @@ -1,3 +1,20 @@ +$font-size: 12px !default; +$line-height: normal !default; + + +// Override Base Grid variables +$v-grid-border: 1px solid #c2c3c4; +$v-grid-cell-vertical-border: 1px solid #d4d4d4; +$v-grid-cell-horizontal-border: none; +$v-grid-cell-active-border: 1px solid #0f68ba; +$v-grid-row-height: 20px; +$v-grid-row-stripe-background-color: #eff0f1; +$v-grid-row-selected-background-color: #4d749f; +$v-grid-header-font-size: 10px; +$v-grid-header-background-color: rgb(217,219,221); +$v-grid-cell-padding-horizontal: 6px; + + @import "../base/base.scss"; // common between others for now for backwards compatibility @@ -34,9 +51,6 @@ background: #f5f5f5; } -$font-size: 12px; -$line-height: normal; - @mixin reindeer { @include base; // TODO @each @@ -61,7 +75,7 @@ $line-height: normal; @include reindeer-progressindicator(v-progressbar); /* For legacy ProgressIndicator component */ @include reindeer-progressindicator(v-progressindicator); - + @include reindeer-select; @include reindeer-slider; @include reindeer-splitpanel; @@ -71,5 +85,3 @@ $line-height: normal; @include reindeer-tree; @include reindeer-window; } - - diff --git a/WebContent/VAADIN/themes/runo/grid/grid.scss b/WebContent/VAADIN/themes/runo/grid/grid.scss index 204dc4c3f2..77d7b0a9af 100644 --- a/WebContent/VAADIN/themes/runo/grid/grid.scss +++ b/WebContent/VAADIN/themes/runo/grid/grid.scss @@ -1,205 +1,53 @@ -@mixin runo-grid($primary-stylename : v-grid) { - - $grid-border-main: 1px solid #b6bbbc; - $grid-border-active: 1px solid #57a7ed; - - .#{$primary-stylename} { - outline: none; - } - - .#{$primary-stylename}-tablewrapper { - @include box-sizing(border-box); - border: $grid-border-main; - } - - .#{$primary-stylename}-cell.frozen { - /* TODO this probably should be a SCSS mixin */ - -webkit-box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1); - box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1); - } - - // Grid header. - .#{$primary-stylename}-header, .#{$primary-stylename}-footer { - - .#{$primary-stylename}-cell { +// Variables defined in runo.scss + +@mixin runo-grid($primaryStyleName: v-grid) { + + .#{$primaryStyleName}-header, + .#{$primaryStyleName}-footer { + > .#{$primaryStyleName}-cell { + background-image: url(img/header-bg.png); color: #393a3c; - background: #e7e9ea url(img/header-bg.png) repeat-x; - border: none; - font-size: 15px; - font-weight: normal; - padding: 9px 2px 9px 6px; - position: relative; - text-shadow: #ffffff 0 1px 0; - - &:first-child { - &:before, &:after { - content: none; - } - } - - &:before { - background-image: url(img/resizer-bg.png); - content: ""; - height: 100%; - left: 0; - top: 0; - width: 2px; - position: absolute; - } - } - - .#{$primary-stylename}-cell-active { - border: $grid-border-active; + text-shadow: #fff 0 1px 0; + @include box-shadow(inset 1px 0 0 #fff); } } - - .#{$primary-stylename}-header { - .#{$primary-stylename}-cell { - border-bottom: $grid-border-main; - } - .#{$primary-stylename}-cell-active { - padding: 8px 1px 9px 5px; - } + .#{$primaryStyleName}-header-deco, + .#{$primaryStyleName}-footer-deco, + .#{$primaryStyleName}-horizontal-scrollbar-deco { + background-image: url(img/header-bg.png); } - - .#{$primary-stylename}-footer { - .#{$primary-stylename}-cell { - border-top: $grid-border-main; - } - - .#{$primary-stylename}-cell-active { - padding: 9px 1px 8px 5px; + + // Selected row + .#{$primaryStyleName}-row-selected { + color: #fff; + + // Selected and active + > .#{$primaryStyleName}-cell-active:before { + border-color: lighten($v-grid-row-selected-background-color, 20%); } } - - .#{$primary-stylename}-header .#{$primary-stylename}-cell-active { - border-bottom: $grid-border-active; - } - - .#{$primary-stylename}-footer .#{$primary-stylename}-cell-active { - border-top: $grid-border-active; - } - + // Sort indicators - .#{$primary-stylename} th.sort-asc:after, - .#{$primary-stylename} th.sort-desc:after { - content: attr(sort-order); - height: 36px; - position: absolute; - right: 0; - top: 0; - width: 20px; - } - - .#{$primary-stylename} th.#{$primary-stylename}-cell-active.sort-asc:after, - .#{$primary-stylename} th.#{$primary-stylename}-cell-active.sort-desc:after { - right: -1px; - top: -1px; - } - - .#{$primary-stylename} th.sort-asc:after { - background: transparent url(img/sort-asc.png) no-repeat right 50%; - } - - .#{$primary-stylename} th.sort-desc:after { - background: transparent url(img/sort-desc.png) no-repeat right 50%; - } - - // Grid body - .#{$primary-stylename}-body { - - .#{$primary-stylename}-row-stripe > .#{$primary-stylename}-cell { - background-color: #f6f7f7; - } - - // Cells - .#{$primary-stylename}-cell { - border: none; - line-height: 23px; - padding: 3px 6px 0 6px; - } - - // Active state - .#{$primary-stylename}-row-active { - - .#{$primary-stylename}-cell { - background: #edeeee; - } - - .#{$primary-stylename}-cell-active { - border: $grid-border-active; - - // Adjust padding for 'active' border. - padding: 2px 5px 0 5px; - } - } - - // Selected state - .#{$primary-stylename}-row.#{$primary-stylename}-row-selected { - color: white; - - .#{$primary-stylename}-cell { - background-color: #57a7ed; - } - - .#{$primary-stylename}-cell-active { - border-color: #489ade; - } - } - - .#{$primary-stylename}-row-active.#{$primary-stylename}-row-selected > .#{$primary-stylename}-cell { - background: #3a90d3; + .#{$primaryStyleName} th.sort-asc, + .#{$primaryStyleName} th.sort-desc { + padding-right: 30px + $v-grid-cell-padding-horizontal; + + &:after { + content: attr(sort-order); + background: transparent no-repeat right 50%; + width: 30px; + height: 36px; + top: 0; } - - } - - // Scrollbars - .#{$primary-stylename}-scroller { - @include box-sizing(border-box); - outline: none; - } - - .#{$primary-stylename}-scroller-vertical { - border-top: $grid-border-main; - border-bottom: $grid-border-main; - } - - .#{$primary-stylename}-scroller-horizontal { - border-left: $grid-border-main; - border-right: $grid-border-main; - } - - // Fillers - .#{$primary-stylename}-horizontalscrollbarbackground, - .#{$primary-stylename}-footercorner, - .#{$primary-stylename}-headercorner { - @include box-sizing(border-box); - border: $grid-border-main; } - .#{$primary-stylename}-footercorner, - .#{$primary-stylename}-headercorner { - background: #e7e9ea url(img/header-bg.png) repeat-x; - border-left: 0; + .#{$primaryStyleName} th.sort-asc:after { + background-image: url(img/sort-asc.png); } - .#{$primary-stylename}-footercorner { - border-top: 0; - } - - .#{$primary-stylename}-headercorner { - border-bottom: 0; + .#{$primaryStyleName} th.sort-desc:after { + background-image: url(img/sort-desc.png); } - - .#{$primary-stylename}-horizontalscrollbarbackground { - background-color: #edeeee; - border-top: 0; - } -} -@mixin box-sizing($value) { - box-sizing: $value; - -moz-box-sizing: $value; - -webkit-box-sizing: $value; -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/runo/runo.scss b/WebContent/VAADIN/themes/runo/runo.scss index 2294d0329b..92fed26267 100644 --- a/WebContent/VAADIN/themes/runo/runo.scss +++ b/WebContent/VAADIN/themes/runo/runo.scss @@ -1,3 +1,22 @@ +$font-size: 13px !default; +$line-height: 18px !default; + + +// Override Base Grid variables +$v-grid-border: 1px solid #b6bbbc; +$v-grid-cell-vertical-border: 1px solid #d4d4d4; +$v-grid-cell-vertical-border: none; +$v-grid-cell-horizontal-border: none; +$v-grid-cell-active-border: 1px solid #57a7ed; +$v-grid-row-height: 26px; +$v-grid-header-row-height: 36px; +$v-grid-row-background-color: #fff !default; +$v-grid-row-stripe-background-color:#eff0f1; +$v-grid-row-selected-background-color: #57a7ed; +$v-grid-header-font-size: 15px; +$v-grid-header-background-color: #e7e9ea; + + @import "../base/base.scss"; @import "absolutelayout/absolutelayout.scss"; @@ -33,9 +52,6 @@ background: #e9eced; } -$font-size: 13px; -$line-height: 18px; - @mixin runo { // TODO move? @include base; @@ -45,9 +61,9 @@ $line-height: 18px; @include runo-button; @include runo-caption; @include runo-colorpicker; - + @include runo-common; - + @include runo-datefield; @include runo-inline-datefield; @include runo-formlayout; @@ -60,11 +76,11 @@ $line-height: 18px; @include runo-orderedlayout; @include runo-panel; @include runo-popupview; - + @include runo-progressindicator(v-progressbar); /* For legacy ProgressIndicator component */ @include runo-progressindicator(v-progressindicator); - + @include runo-select; @include runo-shadow; @include runo-slider; diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss index dbf25273a4..be9201d98d 100644 --- a/WebContent/VAADIN/themes/valo/components/_grid.scss +++ b/WebContent/VAADIN/themes/valo/components/_grid.scss @@ -1,275 +1,108 @@ -@import "../../base/escalator/escalator"; @import "table"; -$primary-stylename: v-grid; -$grid-background-color: valo-table-background-color(); -$grid-border: valo-border($color: $grid-background-color, $strength: 0.8); +$v-grid-row-background-color: valo-table-background-color() !default; +$v-grid-row-stripe-background-color: scale-color($v-grid-row-background-color, $lightness: if(color-luminance($v-grid-row-background-color) < 10, 4%, -4%)) !default; -$grid-cell-active-border-width: round($v-unit-size * 0.05); -$grid-cell-padding-vertical: round(($v-table-row-height - $v-font-size)/2); +$v-grid-border: valo-border($color: $v-grid-row-background-color, $strength: 0.8) !default; +$v-grid-cell-active-border: max(2px, first-number($v-border)) solid $v-selection-color !default; + +$v-grid-row-height: $v-table-row-height !default; +$v-grid-row-selected-background-color: $v-selection-color !default; + +$v-grid-header-font-size: $v-table-header-font-size !default; +$v-grid-header-background-color: $v-background-color !default; + +$v-grid-cell-padding-horizontal: $v-table-cell-padding-horizontal !default; + + +@import "../../base/grid/grid"; /** * - * + * * @param {string} $primary-stylename (v-grid) - * * @group grid - */ -@mixin valo-grid($primary-stylename : v-grid) { + */ +@mixin valo-grid ($primary-stylename: v-grid) { + + @include base-grid($primary-stylename); - @include base-escalator($primary-stylename); - .#{$primary-stylename} { - outline: none; - } - - // Table wrapper - .#{$primary-stylename}-tablewrapper { - border: $grid-border; - @include box-sizing(border-box); + @include user-select(text); + background-color: $v-background-color; } - // Grid header. - .#{$primary-stylename}-header { - @include valo-grid-header-style; - } - - // Sort indicators - .#{$primary-stylename} th.sort-asc:after, th.sort-desc:after { - font-family: FontAwesome; - float: right; + .#{$primary-stylename}-header .#{$primary-stylename}-cell { + @include valo-gradient($v-grid-header-background-color); + text-shadow: valo-text-shadow($font-color: valo-font-color($v-grid-header-background-color), $background-color: $v-grid-header-background-color); } - .#{$primary-stylename} th.sort-asc:after { - content: "\f0dd" attr(sort-order); + .#{$primary-stylename}-footer .#{$primary-stylename}-cell { + @include valo-gradient($v-grid-footer-background-color); + text-shadow: valo-text-shadow($font-color: valo-font-color($v-grid-footer-background-color), $background-color: $v-grid-footer-background-color); } - - .#{$primary-stylename} th.sort-desc:after { - content: "\f0de" attr(sort-order); + + .#{$primary-stylename}-header-deco { + @include valo-gradient($v-grid-header-background-color); } - // Grid body. - .#{$primary-stylename}-body { - - // Rows - .#{$primary-stylename}-row > td { - background-color: $grid-background-color; - } - - .#{$primary-stylename}-row-stripe > td { - $bg-lightness: if(color-luminance($grid-background-color) < 10, 4%, -4%); - background-color: scale-color($grid-background-color, $lightness: $bg-lightness); - } - - // Cells - .#{$primary-stylename}-cell { - padding: $grid-cell-padding-vertical $v-table-cell-padding-horizontal; - } - - - // Active state - .#{$primary-stylename}-row-active .#{$primary-stylename}-cell-active { - border: $grid-cell-active-border-width solid $v-selection-color; - padding-top: $grid-cell-padding-vertical - $grid-cell-active-border-width; - padding-right: $v-table-cell-padding-horizontal - $grid-cell-active-border-width; - padding-bottom: $grid-cell-padding-vertical - $grid-cell-active-border-width; - padding-left: $v-table-cell-padding-horizontal - round($grid-cell-active-border-width/2); - - &:first-child { - padding-left: $v-table-cell-padding-horizontal - $grid-cell-active-border-width; - } - } - - // Selected state - .#{$primary-stylename}-row-selected { - - .#{$primary-stylename}-cell-active { - border-color: adjust-color($v-selection-color, $lightness: 20%); - } - - td { - @include valo-gradient($v-selection-color); - color: $grid-background-color; - border-color: adjust-color($v-selection-color, $lightness: -8%, $saturation: -8%); - } - } + .#{$primary-stylename}-footer-deco, + .#{$primary-stylename}-horizontal-scrollbar-deco { + @include valo-gradient($v-grid-footer-background-color); } - - // Common styles for all cells - .#{$primary-stylename}-cell { - border: none; - border-left: $grid-border; - line-height: 1; - - &.frozen { - @include box-shadow(2px 0 2px rgba(0,0,0,0.1)); + + // Selected + .#{$primary-stylename}-row-selected { + > .#{$primary-stylename}-cell { + @include valo-gradient($v-selection-color); + color: valo-font-color($v-selection-color); + text-shadow: valo-text-shadow($font-color: valo-font-color($v-selection-color), $background-color: $v-selection-color); + border-color: adjust-color($v-selection-color, $lightness: -8%, $saturation: -8%); } - - &:first-child { - border-left: none; - position: relative; - - // Position the first column checkboxes - input[type="checkbox"] { - position: absolute; - bottom: 0; - left: 0; - margin: auto; - right: 0; - top: 0; - } + + > .#{$primary-stylename}-cell-active:before { + border-color: adjust-color($v-selection-color, $lightness: 20%); } } - - // Grid footer. - .#{$primary-stylename}-footer { - @include valo-grid-footer-style; + + .v-editor-row-save, + .v-editor-row-cancel { + @include valo-button-static-style; + @include valo-button-style($unit-size: $v-unit-size--small, $font-size: $v-font-size--small); } - - // Grid editor row - .#{$primary-stylename}-editor-row { - @include box-shadow(0px 0px 6px 2px rgba(0,0,0,0.14)); - position: relative; - outline: none; - - // Ugly fix for correcting editor row position - margin-top: -1px; - - > div { - @include box-sizing(border-box); - display: inline-block; - - .v-textfield, .v-datefield, .v-filterselect { - background: $grid-background-color; - border: none; - border-left: $grid-border; - border-radius: 0; - height: 100%; - width: 100%; - - &:focus, &:active { - @include box-shadow(inset 0 0 0 2px $v-focus-color); - outline: none; - } - } - - &:first-child > * { - border-left: none; - } + + // Customize scrollbars + .#{$primary-stylename}-scroller { + &::-webkit-scrollbar { + border: none; } - } - - // Grid editor row buttons - .v-editor-row-save, .v-editor-row-cancel { - @include valo-button-static-style; - @include valo-button-style($unit-size: $v-unit-size--small, $border-radius: 0); - border-right: none; - position: static; - width: auto !important; - &:after, &:before { - content: none; + &::-webkit-scrollbar-thumb { + border-radius: 10px; + border: 4px solid transparent; + background: if(is-dark-color($v-grid-header-background-color), rgba(255,255,255,.3), rgba(0,0,0,.3)); + -webkit-background-clip: content-box; + background-clip: content-box; } } - .v-editor-row-save { - border-bottom-left-radius: round($v-unit-size * 0.1); - } - - // Scrollbars - .#{$primary-stylename}-scroller { - @include box-sizing(border-box); - outline: none; - } - - .#{$primary-stylename}-scroller-vertical { - border-top: $grid-border; - border-bottom: $grid-border; - } - - .#{$primary-stylename}-scroller-horizontal { - border-left: $grid-border; - border-right: $grid-border; - } - - // Fillers - .#{$primary-stylename}-horizontalscrollbarbackground, - .#{$primary-stylename}-headercorner, - .#{$primary-stylename}-footercorner { - @include box-sizing(border-box); - @include valo-gradient($v-background-color); - border: $grid-border; - } - - .#{$primary-stylename}-horizontalscrollbarbackground { - border-top: none; - } - - .#{$primary-stylename}-headercorner, - .#{$primary-stylename}-footercorner { - border-left: none; - } - - .#{$primary-stylename}-footercorner { - border-top: none; - } - - .#{$primary-stylename}-headercorner { - border-bottom: none; - } -} -@mixin valo-grid-header-style { - .#{$primary-stylename}-cell { - @include valo-gradient($v-background-color); - border-bottom: $grid-border; - } + .#{$primary-stylename}-scroller-vertical { + border: $v-grid-border; + border-left: none; - th { - font-weight: inherit; - font-size: $v-table-header-font-size; - padding: $grid-cell-padding-vertical $v-table-cell-padding-horizontal $grid-cell-padding-vertical - $v-table-border-width; - } - - // Active state - .#{$primary-stylename}-cell-active { - border: $grid-cell-active-border-width solid $v-selection-color; - padding-top: $grid-cell-padding-vertical - $grid-cell-active-border-width; - padding-right: $v-table-cell-padding-horizontal - $grid-cell-active-border-width; - padding-bottom: $grid-cell-padding-vertical - $grid-cell-active-border-width; - padding-left: $v-table-cell-padding-horizontal - round($grid-cell-active-border-width/2); - } - - & .#{$primary-stylename}-cell-active:first-child { - border-left: $grid-cell-active-border-width solid $v-selection-color; - padding-left: $v-table-cell-padding-horizontal - $grid-cell-active-border-width; + &::-webkit-scrollbar-thumb { + min-height: 30px; } + } -} + .#{$primary-stylename}-scroller-horizontal { + border: $v-grid-border; + border-top: none; -@mixin valo-grid-footer-style { - .#{$primary-stylename}-cell { - @include valo-gradient($v-background-color); - border-top: $grid-border; + &::-webkit-scrollbar-thumb { + min-width: 30px; + } } - td { - font-weight: inherit; - font-size: $v-table-header-font-size; - padding: $grid-cell-padding-vertical $v-table-cell-padding-horizontal $grid-cell-padding-vertical - $v-table-border-width; - } - - // Active state - .#{$primary-stylename}-cell-active { - border: $grid-cell-active-border-width solid $v-selection-color; - padding-top: $grid-cell-padding-vertical - round($grid-cell-active-border-width/2); - padding-right: $v-table-cell-padding-horizontal - $grid-cell-active-border-width; - padding-bottom: $grid-cell-padding-vertical - $grid-cell-active-border-width; - padding-left: $v-table-cell-padding-horizontal - round($grid-cell-active-border-width/2); - } - - & .#{$primary-stylename}-cell-active:first-child { - border-left: $grid-cell-active-border-width solid $v-selection-color; - padding-left: $v-table-cell-padding-horizontal - $grid-cell-active-border-width; - } - } |