diff options
| author | Adam Wagner <wbadam@users.noreply.github.com> | 2017-05-03 11:20:49 +0300 |
|---|---|---|
| committer | Pekka Hyvönen <pekka@vaadin.com> | 2017-05-03 11:20:49 +0300 |
| commit | ffafef1a47d177ffc570c9a33788eae929905990 (patch) | |
| tree | 5f2990a452da56dff9758da862279ecb57404032 | |
| parent | 61bada07475d77b88c112b19519ef88c58d5fe87 (diff) | |
| download | vaadin-framework-ffafef1a47d177ffc570c9a33788eae929905990.tar.gz vaadin-framework-ffafef1a47d177ffc570c9a33788eae929905990.zip | |
Create styles for grid drop target to indicate where the dragover position (#9080) (#9213)
| -rw-r--r-- | themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss | 51 |
1 files changed, 50 insertions, 1 deletions
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss index 5e2af76a72..06376d6a6e 100644 --- a/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss +++ b/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss @@ -306,7 +306,7 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co -ms-user-select: none; user-select: none; } - + .#{$primaryStyleName}-column-resize-simple-indicator { position: absolute; width: 3px; @@ -597,6 +597,8 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co } } +$v-grid-drag-indicator-color: $v-focus-color; + /** * * @@ -827,6 +829,53 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co text-align: center; float: left; } + + // Drag and drop + .#{$primary-stylename}-row-drag-top, .#{$primary-stylename}-row-drag-bottom, .#{$primary-stylename}-row-drag-bottom { + z-index: 100; + } + + .#{$primary-stylename}-row-drag-top:before, + .#{$primary-stylename}-row-drag-bottom:after { + content: ""; + display: block; + position: absolute; + height: 2px; + width: 100%; + background: $v-grid-drag-indicator-color; + pointer-events: none; + border: none; + } + + .#{$primary-stylename}-row-drag-bottom:after { + bottom: -1px; + } + + .#{$primary-stylename}-row-drag-top:before { + top: -1px; + } + + .#{$primary-stylename}-row-drag-center:after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + border: 2px solid $v-grid-drag-indicator-color; + pointer-events: none; + } + + .#{$primary-stylename}-row-selected { + &.#{$primary-stylename}-row-drag-center:after { + border-color: darken($v-grid-drag-indicator-color, 10%); + } + + &.#{$primary-stylename}-row-drag-top:before, + &.#{$primary-stylename}-row-drag-bottom:after { + background: darken($v-grid-drag-indicator-color, 10%); + } + } } |