Update panels styles

ryandeba · Feb 8, 2018 · 910921c · 910921c
1 parent 2c5f519
commit 910921c
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 110 deletions.
diff --git a/dist/css/grapes.min.css b/dist/css/grapes.min.css
diff --git a/src/styles/scss/_gjs_layers.scss b/src/styles/scss/_gjs_layers.scss
@@ -25,8 +25,6 @@
     }
 
     &-vis {
-      @extend .btn;
-
       height: auto !important;
       width: auto !important;
       font-size: 13px;

diff --git a/src/styles/scss/_gjs_panels.scss b/src/styles/scss/_gjs_panels.scss
@@ -0,0 +1,71 @@
+.#{$pn-prefix} {
+  &panel {
+    display: inline-block;
+    position: absolute;
+    box-sizing: border-box;
+    text-align: center;
+    padding: 5px;
+    z-index: 3;
+
+    .icon-undo,
+    .icon-redo {
+      font-size: 20px;
+      height: 30px;
+      width: 25px;
+    }
+  }
+
+  &commands {
+    width: (100% - $leftWidth);
+    left: 0;
+    top: 0;
+    box-shadow: 0 0 5px $mainDkColor;
+  }
+
+  &options {
+    right: $leftWidth;
+    top: 0;
+  }
+
+  &views {
+    border-bottom: 2px solid $mainDkColor;
+    right: 0;
+    width: $leftWidth;
+    z-index: 4;
+
+    &-container {
+      height: 100%;
+      padding: 42px 0 0;
+      right: 0;
+      width: $leftWidth;
+      overflow: auto;
+      box-shadow: 0 0 5px $mainDkColor;
+    }
+  }
+
+  &buttons {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &btn {
+    box-sizing: border-box;
+    height: 30px;
+    width: 30px;
+    line-height: 21px;
+    background-color: transparent;
+    border: none;
+    font-size: 18px;
+    margin-right: 5px;
+    border-radius: 2px;
+    padding: 5px;
+    position: relative;
+    cursor: pointer;
+
+    &.#{$pn-prefix}active {
+      background-color: rgba(0, 0, 0, 0.15);
+      box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset;
+    }
+  }
+}
diff --git a/src/styles/scss/main.scss b/src/styles/scss/main.scss
@@ -330,112 +330,7 @@ $prefix: $app-prefix;
   outline: none;
 }
 
-/********* PANELS **********/
-
-.#{$pn-prefix}panel {
-  //@extend .#{$app-prefix}bg-main;
-  //@extend .#{$app-prefix}color-main;
-  display: inline-block;
-  padding: 5px;
-  position: absolute;
-  box-sizing: border-box;
-  text-align: center;
-  z-index:3;
-
-  &##{$pn-prefix}commands{
-    width: (100% - $leftWidth);
-    left:0; top: 0;
-    box-shadow: 0 0 5px $mainDkColor;
-  }
-
-  &##{$pn-prefix}options{
-  	right: $leftWidth;
-    top: 0;
-  }
-
-  &##{$pn-prefix}options2{
-  	@extend ##{$pn-prefix}commands;
-  	bottom: 150px;
-  	height: auto;
-  }
-
-  .icon-undo, .icon-redo{
-  	font-size: 20px;
-    height: 30px;
-    width: 25px;
-  }
-
-  &##{$pn-prefix}views{
-  	border-bottom: 2px solid $mainDkColor;
-  	right: 0;
-  	width: $leftWidth;
-  	z-index: 4;
-  }
-
-  &##{$pn-prefix}views-container{
-  	height: 100%;
-    padding: 42px 0 0;
-    right: 0;
-    width: $leftWidth;
-    overflow: auto;
-    box-shadow: 0 0 5px $mainDkColor;
-  }
-}
-
-.#{$pn-prefix}buttons {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-}
-
-.#{$pn-prefix}btn, .#{$app-prefix}btnt {
-	box-sizing: border-box;
-	height: 30px; width: 30px;
-	line-height: 21px;
-	background-color: transparent;
-	border:none;
-	font-size: 18px;
-	margin-right: 5px;
-	border-radius: 2px;
-	cursor: pointer;
-	padding: 5px;
-	position: relative;
-
-	&.#{$pn-prefix}active {
-		background-color: rgba(0, 0, 0, 0.15);
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset;
-	}
-
-	> .#{$pn-prefix}arrow-rd {
-	  	border-bottom: 5px solid $mainLhlColor;
-	  	border-left: 5px solid transparent;
-	  	bottom: 2px; right: 2px;
-	  	position: absolute;
-	}
-
-	> .#{$pn-prefix}buttons{
-		background-color: $mainColor;
-		border-radius: 2px;
-		position: absolute;
-		display: none;
-		left: 50px;
-		top: 0;
-		padding: 5px;
-
-		&.#{$pn-prefix}visible{ display: block; }
-
-		> .#{$pn-prefix}arrow-l {
-			border-bottom: 5px solid transparent;
-		    border-right: 5px solid $mainColor;
-		    border-top: 5px solid transparent;
-		    left: -5px; top: 15px;
-		    position: absolute;
-		}
-	}
-}
-
-/* pa-refresh pa-rocket pa-trash pa-columns pa-rotate-left/right */
-.btn.expand{ background-image: none;}
+@import 'gjs_panels';
 
 /***********  Components *************/
 

diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
@@ -233,7 +233,6 @@ class Resizer {
     var rect = this.getElementPos(el, { target: 'el' });
     this.handlerAttr = e.target.getAttribute(attrName);
     this.clickedHandler = e.target;
-    console.log('rect', rect);
     this.startDim = {
       t: rect.top,
       l: rect.left,