refactor(widget): resize handler style moved to global

Guillaume Chau · Guillaume Chau · commit e25bcb46406e · 2018-09-24T15:02:20.000+02:00
diff --git a/packages/@vue/cli-ui/src/components/Widget.vue b/packages/@vue/cli-ui/src/components/Widget.vue
@@ -435,45 +435,6 @@ $zoom = .7
     /deep/ > *
       transform scale(1/$zoom)
 
-  .resize-handle
-    position absolute
-    width 12px
-    height @width
-    border-radius 50%
-    background rgba($vue-ui-color-primary, .5)
-    &:hover
-      background $vue-ui-color-primary
-    &.top,
-    &.top-left,
-    &.top-right
-      top (-@height / 2)
-    &.bottom,
-    &.bottom-left,
-    &.bottom-right
-      bottom (-@height / 2)
-    &.left,
-    &.top-left,
-    &.bottom-left
-      left (-@width / 2)
-    &.right,
-    &.top-right,
-    &.bottom-right
-      right (-@width / 2)
-    &.top,
-    &.bottom
-      left calc(50% - (@width / 2))
-      cursor ns-resize
-    &.left,
-    &.right
-      top calc(50% - (@height / 2))
-      cursor ew-resize
-    &.top-left,
-    &.bottom-right
-      cursor nwse-resize
-    &.top-right,
-    &.bottom-left
-      cursor nesw-resize
-
 .move-ghost,
 .resize-ghost
   z-index 10000
diff --git a/packages/@vue/cli-ui/src/style/main.styl b/packages/@vue/cli-ui/src/style/main.styl
@@ -182,3 +182,45 @@ ansi-colors('white', $vue-ui-color-light)
   
   .token.punctuation
     color lighten(#999, 20%)
+
+// Resizing
+
+.resize-handle
+  position absolute
+  width 12px
+  height @width
+  border-radius 50%
+  background rgba($vue-ui-color-primary, .5)
+  &:hover
+    background $vue-ui-color-primary
+  &.top,
+  &.top-left,
+  &.top-right
+    top (-@height / 2)
+  &.bottom,
+  &.bottom-left,
+  &.bottom-right
+    bottom (-@height / 2)
+  &.left,
+  &.top-left,
+  &.bottom-left
+    left (-@width / 2)
+  &.right,
+  &.top-right,
+  &.bottom-right
+    right (-@width / 2)
+  &.top,
+  &.bottom
+    left calc(50% - (@width / 2))
+    cursor ns-resize
+  &.left,
+  &.right
+    top calc(50% - (@height / 2))
+    cursor ew-resize
+  &.top-left,
+  &.bottom-right
+    cursor nwse-resize
+  &.top-right,
+  &.bottom-left
+    cursor nesw-resize
+
