| @mixin base-dragwrapper($primaryStyleName : v-ddwrapper) { |
| |
| .#{$primaryStyleName} { |
| padding: 2px; |
| -moz-border-radius: 4px; |
| -webkit-border-radius: 4px; |
| border-radius: 4px; |
| position: relative; |
| -ms-touch-action: none; |
| touch-action: none; |
| } |
| [draggable=true] { |
| -khtml-user-drag: element; |
| -webkit-user-drag: element; |
| -khtml-user-select: none; |
| -webkit-user-select: none; |
| } |
| .v-ie & .#{$primaryStyleName} a.drag-start { |
| display: block; |
| position: absolute; |
| top: 0; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| width: 100%; |
| height: 100%; |
| opacity: 0; |
| /* Some color needed to make it draggable */ |
| background-color:cyan; |
| filter: alpha(opacity=0); |
| } |
| .#{$primaryStyleName}-over { |
| border: 2px solid #1d9dff; |
| background-color: #bcdcff; |
| padding: 0; |
| } |
| .#{$primaryStyleName}-over { |
| background-color: rgba(169,209,255,.6); |
| } |
| .no-box-drag-hints .#{$primaryStyleName}-over { |
| border: none; |
| background-color: transparent; |
| padding: 2px; |
| } |
| &.v-app .#{$primaryStyleName}-over-top, |
| .v-window .#{$primaryStyleName}-over-top, |
| .v-popupview-popup .#{$primaryStyleName}-over-top { |
| border: none; |
| border-top: 2px solid #1d9dff; |
| background-color: transparent; |
| padding: 2px; |
| padding-top: 0; |
| -moz-border-radius: 0; |
| -webkit-border-radius: 0; |
| border-radius: 0; |
| } |
| &.v-app .#{$primaryStyleName}-over-bottom, |
| .v-window .#{$primaryStyleName}-over-bottom, |
| .v-popupview-popup .#{$primaryStyleName}-over-bottom { |
| border: none; |
| border-bottom: 2px solid #1d9dff; |
| background-color: transparent; |
| padding: 2px; |
| padding-bottom: 0; |
| -moz-border-radius: 0; |
| -webkit-border-radius: 0; |
| border-radius: 0; |
| } |
| &.v-app .#{$primaryStyleName}-over-left, |
| .v-window .#{$primaryStyleName}-over-left, |
| .v-popupview-popup .#{$primaryStyleName}-over-left { |
| border: none; |
| border-left: 2px solid #1d9dff; |
| background-color: transparent; |
| padding: 2px; |
| padding-left: 0; |
| -moz-border-radius: 0; |
| -webkit-border-radius: 0; |
| border-radius: 0; |
| } |
| &.v-app .#{$primaryStyleName}-over-right, |
| .v-window .#{$primaryStyleName}-over-right, |
| .v-popupview-popup .#{$primaryStyleName}-over-right { |
| border: none; |
| border-right: 2px solid #1d9dff; |
| background-color: transparent; |
| padding: 2px; |
| padding-right: 0; |
| -moz-border-radius: 0; |
| -webkit-border-radius: 0; |
| border-radius: 0; |
| } |
| .#{$primaryStyleName}, |
| .#{$primaryStyleName}-over, |
| &.v-app .#{$primaryStyleName}-over-top, |
| .v-window .#{$primaryStyleName}-over-top, |
| .v-popupview-popup .#{$primaryStyleName}-over-top, |
| &.v-app .#{$primaryStyleName}-over-bottom, |
| .v-window .#{$primaryStyleName}-over-bottom, |
| .v-popupview-popup .#{$primaryStyleName}-over-bottom, |
| &.v-app .#{$primaryStyleName}-over-left, |
| .v-window .#{$primaryStyleName}-over-left, |
| .v-popupview-popup .#{$primaryStyleName}-over-left, |
| &.v-app .#{$primaryStyleName}-over-right, |
| .v-window .#{$primaryStyleName}-over-right, |
| .v-popupview-popup .#{$primaryStyleName}-over-right { |
| border-color: rgba(0,109,232,.6); |
| } |
| |
| .#{$primaryStyleName}-over-top:before, |
| .#{$primaryStyleName}-over-bottom:after, |
| .#{$primaryStyleName}-over-left:before, |
| .#{$primaryStyleName}-over-right:before { |
| display: block; |
| |
| position: absolute; |
| width: 6px; |
| height: 6px; |
| margin-top: -4px; |
| margin-left: -2px; |
| background: transparent url(../common/img/drag-slot-dot.png) no-repeat; |
| } |
| .#{$primaryStyleName}-over-bottom:after { |
| margin-top: -2px; |
| } |
| .#{$primaryStyleName}-over-left:before, |
| .#{$primaryStyleName}-over-right:before { |
| background-position: 0 -6px; |
| margin-top: -2px; |
| margin-left: -4px; |
| } |
| .#{$primaryStyleName}-over-right:before { |
| position: relative; |
| margin-bottom: -4px; |
| margin-right: -4px; |
| margin-left: 0; |
| width: auto; |
| background-position: 100% -6px; |
| } |
| |
| .no-horizontal-drag-hints .#{$primaryStyleName}-over-left { |
| padding-left: 2px; |
| border-left: none; |
| } |
| .no-horizontal-drag-hints .#{$primaryStyleName}-over-right { |
| padding-right: 2px; |
| border-right: none; |
| } |
| .no-vertical-drag-hints .#{$primaryStyleName}-over-top { |
| padding-top: 2px; |
| border-top: none; |
| } |
| .no-vertical-drag-hints .#{$primaryStyleName}-over-bottom { |
| padding-bottom: 2px; |
| border-bottom: none; |
| } |
| .no-horizontal-drag-hints .#{$primaryStyleName}-over-left:before, |
| .no-horizontal-drag-hints .#{$primaryStyleName}-over-right:before, |
| .no-vertical-drag-hints .#{$primaryStyleName}-over-top:before, |
| .no-vertical-drag-hints .#{$primaryStyleName}-over-bottom:after { |
| display: none; |
| } |
| |
| } |