summaryrefslogtreecommitdiffstats
path: root/themes
diff options
context:
space:
mode:
authorAdam Wagner <wbadam@users.noreply.github.com>2017-05-03 11:20:49 +0300
committerPekka Hyvönen <pekka@vaadin.com>2017-05-03 11:20:49 +0300
commitffafef1a47d177ffc570c9a33788eae929905990 (patch)
tree5f2990a452da56dff9758da862279ecb57404032 /themes
parent61bada07475d77b88c112b19519ef88c58d5fe87 (diff)
downloadvaadin-framework-ffafef1a47d177ffc570c9a33788eae929905990.tar.gz
vaadin-framework-ffafef1a47d177ffc570c9a33788eae929905990.zip
Create styles for grid drop target to indicate where the dragover position (#9080) (#9213)
Diffstat (limited to 'themes')
-rw-r--r--themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss51
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%);
+ }
+ }
}