Merge pull request #361 from javier-tarazaga/improve-panes-style

Minor improvements to the pane's tab style
SuperblocksHQ · Jan 29, 2019 · 49f7c58 · 49f7c58
2 parents 9af5b44 + 5535eda
commit 49f7c58
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/src/components/projecteditor/panes.js b/src/components/projecteditor/panes.js
@@ -320,7 +320,6 @@ class Panes extends Component {
                     <PanesHeader
                         panes={this.props.panes}
                         paneComponents={this.panes}
-
                         closeAllPanes={this.closeAllPanes}
                         closeAllOtherPanes={this.closeAllOtherPanes}
                         tabClicked={this.tabClicked}

diff --git a/src/components/projecteditor/sidePanels/style.less b/src/components/projecteditor/sidePanels/style.less
@@ -104,8 +104,9 @@
         display: flex;
         align-content: center;
         align-items: center;
-        height: 38px;
-        padding: 9px;
+        height: 35px;
+        padding: 7px 12px 8px 12px;
+        border-bottom: 1px solid #121516;
         .panelIcon {
             color: #fff;
             margin-left: 7px;
@@ -123,4 +124,4 @@
             }
         }
     }
-}
+}
diff --git a/src/components/projecteditor/style.less b/src/components/projecteditor/style.less
@@ -64,12 +64,12 @@
             -ms-user-select: none;
             user-select: none;
             background-color: #252525;
-            min-height: 38px;
+            min-height: 35px;
             width: 100%;
             overflow-y: hidden;
             overflow-x: auto;
             .tab {
-                padding: 10px 12px 10px 12px;
+                padding: 7px 12px 8px 12px;
                 display: flex;
                 align-items: center;
                 align-content: center;
@@ -78,6 +78,8 @@
                 background-color: #2D2D2D;
                 cursor: pointer;
                 color: #969696;
+                border-right: 1px solid #121516;
+                padding-right: 24px;
                 .tabContainer {
                     div {
                         float: left;
@@ -89,16 +91,40 @@
                         }
                     }
                     .close {
-                        margin-left: 10px;
                         display: none;
                         font-size: 0.85em;
                     }
                 }
                 &.selected {
                     background-color: #1e1e1e;
                     color: #FFFFFF;
+                    padding-right: 10px;
                     .close {
                         display: block;
+                        opacity: 1;
+                        color: #fff;
+                        opacity: 0.8;
+                        &:hover {
+                            opacity: 1;
+                        }
+                        button {
+                            padding: 0 0;
+                        }
+                    }
+                }
+                &:hover{
+                    padding-right: 10px;
+                    .close {
+                        display: block;
+                        opacity: 1;
+                        color: #fff;
+                        opacity: 0.8;
+                        &:hover {
+                            opacity: 1;
+                        }
+                        button {
+                            padding: 0 0;
+                        }
                     }
                 }
             }
@@ -172,7 +198,7 @@
     .sidePanelContainer {
         position: relative;
     }
-    
+
     .sideButtonsContainer {
         position: absolute;
         top: 0;