| @import "table"; |
| |
| $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; |
| |
| $v-grid-border-color-source: $v-grid-row-background-color !default; |
| $v-grid-border: flatten-list(valo-border($color: $v-grid-border-color-source, $strength: 0.8)) !default; |
| $v-grid-cell-focused-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: 1.5 * $v-table-cell-padding-horizontal !default; |
| |
| $v-grid-animations-enabled: $v-animations-enabled !default; |
| |
| $v-grid-details-marker-width: first-number($v-grid-border) * 2 !default; |
| $v-grid-details-marker-color: $v-selection-color !default; |
| $v-grid-details-border-top: valo-border($color: $v-grid-border-color-source, $strength: 0.3) !default; |
| $v-grid-details-border-top-stripe: valo-border($color: $v-grid-row-stripe-background-color, $strength: 0.3) !default; |
| |
| $v-grid-border-size: 1px !default; |
| $v-grid-border: $v-grid-border-size 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-details-border-bottom: $v-grid-cell-horizontal-border !default; |
| $v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default; |
| |
| @import "../../base/grid/grid"; |
| |
| /** |
| * |
| * |
| * @param {string} $primary-stylename (v-grid) - |
| * |
| * @group grid |
| */ |
| @mixin valo-grid ($primary-stylename: v-grid) { |
| |
| @include base-grid($primary-stylename); |
| |
| .#{$primary-stylename} { |
| @include user-select(text); |
| background-color: $v-background-color; |
| |
| &.v-disabled { |
| @include opacity($v-disabled-opacity); |
| } |
| } |
| |
| .#{$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}-header .#{$primary-stylename}-cell.dragged { |
| @include opacity(0.5, false); |
| @include transition (opacity .3s ease-in-out); |
| } |
| |
| .#{$primary-stylename}-header .#{$primary-stylename}-cell.dragged-column-header { |
| margin-top: round($v-grid-row-height/-2); |
| } |
| |
| .#{$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}-header-deco { |
| @include valo-gradient($v-grid-header-background-color); |
| } |
| |
| .#{$primary-stylename}-footer-deco, |
| .#{$primary-stylename}-horizontal-scrollbar-deco { |
| @include valo-gradient($v-grid-footer-background-color); |
| } |
| |
| // Selected |
| .#{$primary-stylename}-row-selected { |
| $grid-sel-bg: $v-grid-row-selected-background-color; |
| |
| > .#{$primary-stylename}-cell { |
| @include valo-gradient($grid-sel-bg); |
| color: valo-font-color($grid-sel-bg); |
| text-shadow: valo-text-shadow($font-color: valo-font-color($grid-sel-bg), $background-color: $grid-sel-bg); |
| border-color: adjust-color($grid-sel-bg, $lightness: -8%, $saturation: -8%); |
| } |
| |
| > .#{$primary-stylename}-cell-focused:before { |
| border-color: adjust-color($grid-sel-bg, $lightness: 20%); |
| } |
| } |
| |
| .#{$primary-stylename}-editor { |
| @include valo-focus-style; |
| border-color: $v-focus-color; |
| } |
| |
| .#{$primary-stylename}-editor-footer { |
| font-size: $v-font-size--small; |
| padding: 0 round($v-layout-spacing-horizontal / 2); |
| background: $v-app-background-color; |
| @if $v-grid-animations-enabled { |
| @include animation(valo-grid-editor-footer-animate-in 200ms 120ms backwards); |
| } |
| } |
| |
| @if $v-grid-animations-enabled { |
| .#{$primary-stylename}-editor-footer:first-child { |
| @include animation(valo-grid-editor-footer-animate-in-alt 200ms 120ms backwards); |
| } |
| } |
| |
| .#{$primary-stylename}-editor-cells { |
| z-index: 1; |
| } |
| |
| .#{$primary-stylename}-editor-cells > div { |
| // Vertical centering for widgets |
| &:before { |
| content: ""; |
| display: inline-block; |
| height: 100%; |
| vertical-align: middle; |
| } |
| |
| &.not-editable.#{$primary-stylename}-cell { |
| float: none; |
| } |
| |
| .error::before { |
| border-top: round($v-unit-size / 4) solid $v-error-indicator-color; |
| border-right: round($v-unit-size / 4) solid transparent; |
| } |
| |
| .error, |
| .error > input { |
| // taken from @mixin valo-textfield-error-style() |
| background-color: scale-color($v-error-indicator-color, $lightness: 98%); |
| } |
| |
| .v-textfield, |
| .v-textfield-focus, |
| .v-datefield, |
| .v-datefield .v-textfield-focus, |
| .v-filterselect-input, |
| .v-filterselect-input:focus { |
| border: none; |
| border-radius: 0; |
| background: transparent; |
| |
| @if $v-textfield-bevel { |
| @include box-shadow(valo-bevel-and-shadow($bevel: $v-textfield-bevel)); |
| } @else { |
| @include box-shadow(none); |
| } |
| } |
| |
| input[type="text"].v-datefield-textfield { |
| padding-left: $v-unit-size * 1.2; |
| } |
| |
| .v-datefield-button { |
| .v-ie8 & { |
| margin-left: 0px; |
| } |
| } |
| |
| .v-filterselect-button { |
| .v-ie8 & { |
| margin-left: 0px; |
| } |
| } |
| |
| .v-textfield-focus, |
| .v-datefield .v-textfield-focus, |
| .v-filterselect-input:focus { |
| position: relative; |
| } |
| |
| .v-select { |
| padding-left: round($v-grid-cell-padding-horizontal / 2); |
| padding-right: round($v-grid-cell-padding-horizontal / 2); |
| } |
| |
| .v-checkbox { |
| margin: 0 round($v-grid-cell-padding-horizontal / 2) 0 $v-grid-cell-padding-horizontal; |
| |
| > input[type="checkbox"] { |
| margin-left: 0; |
| } |
| |
| > label { |
| white-space: nowrap; |
| } |
| } |
| } |
| |
| .#{$primary-stylename}-editor-message > div:before { |
| display: inline-block; |
| @include valo-error-indicator-style($is-pseudo-element: true); |
| } |
| |
| .#{$primary-stylename}-editor-save, |
| .#{$primary-stylename}-editor-cancel { |
| @include valo-link-style; |
| font-weight: $v-font-weight + 100; |
| text-decoration: none; |
| border: none; |
| background: transparent; |
| padding: round($v-layout-spacing-vertical / 2) round($v-layout-spacing-horizontal / 2); |
| margin: 0; |
| outline: none; |
| } |
| |
| .#{$primary-stylename}-spacer { |
| margin-top: first-number($v-grid-border) * -1; |
| } |
| |
| // Sidebar |
| .#{$primary-stylename}-sidebar.v-contextmenu { |
| &.open { |
| |
| .#{$primary-stylename}-sidebar-content { |
| margin: 0 0 2px; |
| padding: 4px 4px 2px; |
| } |
| } |
| |
| &.closed { |
| @include valo-gradient($v-grid-header-background-color); |
| } |
| } |
| |
| // Customize scrollbars |
| .#{$primary-stylename}-scroller { |
| &::-webkit-scrollbar { |
| border: 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; |
| } |
| } |
| |
| .#{$primary-stylename}-scroller-vertical::-webkit-scrollbar-thumb { |
| min-height: 30px; |
| } |
| |
| .#{$primary-stylename}-scroller-horizontal::-webkit-scrollbar-thumb { |
| min-width: 30px; |
| } |
| |
| } |
| |
| |
| @include keyframes(valo-grid-editor-footer-animate-in) { |
| 0% { |
| margin-top: -$v-grid-row-height; |
| } |
| } |
| |
| @include keyframes(valo-grid-editor-footer-animate-in-alt) { |
| 0% { |
| margin-bottom: -$v-grid-row-height - first-number($v-grid-cell-horizontal-border); |
| } |
| 100% { |
| margin-bottom: first-number($v-grid-cell-horizontal-border) * -1; |
| } |
| } |