diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo/components/_grid.scss')
-rw-r--r-- | WebContent/VAADIN/themes/valo/components/_grid.scss | 313 |
1 files changed, 73 insertions, 240 deletions
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; - } - } |