restructure settings bar styles

resources/public/styles/framework.scss

@@ -826,6 +826,7 @@ input[type=range]:focus::-ms-fill-upper {
         justify-content: center;
         left: 0;
         top: 0;
+        white-space: normal;
         width: 100%;
       }
 

resources/public/styles/main.scss

@@ -37,6 +37,10 @@
 @import 'partials/tool-bar';
 @import 'partials/project-bar';
 @import 'partials/settings-bar';
+@import 'partials/settings-bar-tools';
+@import 'partials/settings-bar-icons';
+@import 'partials/settings-bar-layers';
+@import 'partials/settings-bar-sitemap';
 @import 'partials/dashboard-bar';
 @import 'partials/dashboard-grid';
 @import 'partials/activity-bar';

resources/public/styles/partials/settings-bar-icons.scss

@@ -0,0 +1,42 @@
+.figures-catalog {
+  width: 100%;
+  padding: $medium $medium 0 $medium;
+
+  select {
+    width: 100%;
+    margin-bottom: 0;
+  }
+
+}
+
+.figure-btn {
+  align-items: center;
+  background-color: $color-gray-light;
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  height: 54px;
+  justify-content: center;
+  margin: $medium 0 0 $medium;
+  width: 54px;
+
+  svg {
+    fill: $color-gray-darker;
+    height: 40px;
+    width: 40px;
+  }
+
+  &:hover {
+    background-color: $color-white;
+  }
+
+  &.selected {
+    background-color: $color-gray-darker;
+
+    svg {
+      fill: $color-primary;
+    }
+
+  }
+
+}

resources/public/styles/partials/settings-bar-layers.scss

@@ -0,0 +1,218 @@
+.layers-tools {
+  background-color: $color-gray-darker;
+  bottom: 0;
+  display: flex;
+  height: 30px;
+  justify-content: center;
+  position: absolute;
+  width: 100%;
+
+  .layers-tools-content {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    width: 80px;
+
+    li {
+      cursor: pointer;
+
+      svg {
+        fill: $color-gray;
+        height: 16px;
+        width: 16px;
+
+        &:hover {
+          fill: $color-white;
+        }
+
+      }
+
+      &.delete-layer {
+
+        svg {
+
+          &:hover {
+            fill: $color-danger;
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+}
+
+.element-list {
+  margin: 0;
+  width: 100%;
+
+  ul {
+    margin: 0;
+  }
+
+  li {
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &.open {
+
+      ul {
+
+        li {
+
+          .element-list-body {
+            border-style: dashed;
+          }
+
+        }
+
+      }
+
+    }
+
+    .element-list-body {
+      align-items: center;
+      border-bottom: 1px solid $color-gray-darker;
+      box-sizing: border-box;
+      background-color: $color-gray-dark;
+      display: flex;
+      padding: $small;
+      width: 100%;
+
+      svg {
+        fill: $color-gray;
+        height: 13px;
+        margin-right: 8px;
+        width: 13px;
+      }
+
+      .element-actions {
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+        width: 62px;
+      }
+
+      .element-icon,
+      .sublevel-element {
+
+        svg {
+          fill: $color-gray-darker;
+        }
+
+      }
+
+      .toggle-content {
+        margin-left: auto;
+        width: 12px;
+
+        svg {
+          fill: $color-gray-darker;
+          transform: rotate(90deg);
+          width: 12px;
+        }
+
+        &.inverse {
+          svg { transform: rotate(270deg); }
+        }
+
+        &:hover {
+
+          svg {
+            fill: $color-white;
+          }
+
+        }
+
+      }
+
+      &.group {
+
+        &.open {
+
+          .toggle-content {
+            flex-shrink: 0;
+
+            svg {
+              transform: rotate(270deg);
+            }
+
+          }
+
+        }
+
+      }
+
+      span {
+        color: darken($color-gray-darker, 8%);
+        font-size: $fs13;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &.selected {
+        background-color: lighten($color-gray-darker, 5%);
+
+        .element-icon {
+
+          svg {
+            fill: $color-primary;
+          }
+
+        }
+
+        span {
+          color: $color-primary;
+        }
+
+      }
+
+      .selected {
+
+        svg {
+          fill: $color-gray-lighter;
+        }
+
+      }
+
+      &:hover {
+        border-color: $color-gray-light;
+
+        .element-icon {
+
+          svg {
+            fill: $color-gray-lighter;
+          }
+
+        }
+
+        span {
+          color: $color-gray-lighter;
+        }
+
+      }
+
+      &.drag-top {
+        border-top: 2px solid $color-primary;
+      }
+
+      &.drag-bottom {
+        border-bottom: 2px solid $color-primary;
+      }
+
+      &.drag-inside {
+        border: 2px solid $color-primary;
+      }
+
+    }
+
+  }
+
+}

resources/public/styles/partials/settings-bar-tools.scss

@@ -0,0 +1,31 @@
+.tool-btn {
+  align-items: center;
+  background-color: $color-gray-light;
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  height: 54px;
+  justify-content: center;
+  margin: $medium 0 0 $medium;
+  width: 54px;
+
+  svg {
+    fill: $color-gray-darker;
+    height: 35px;
+    width: 35px;
+  }
+
+  &:hover {
+    background-color: $color-white;
+  }
+
+  &.selected {
+    background-color: $color-gray-darker;
+
+    svg {
+      fill: $color-primary;
+    }
+
+  }
+
+}

resources/public/styles/partials/settings-bar.scss

@@ -4,7 +4,7 @@
   height: 100%;
   position: fixed;
   right: 0;
-  width: 250px;
+  width: 230px;
   z-index: 10;
 
   &.settings-bar-left {
@@ -21,6 +21,7 @@
     height: 100%;
 
     .tool-window {
+      border-bottom: 1px solid $color-gray-darker;
       display: flex;
       flex-direction: column;
       height: 100%;
@@ -72,294 +73,6 @@
         flex-wrap: wrap;
         overflow-y: auto;
         padding-bottom: $medium;
-        .figures-catalog {
-          width: 100%;
-          padding: $medium $medium 0 $medium;
-          select {
-            width: 100%;
-            margin-bottom: 0;
-          }
-        }
-
-      }
-
-    }
-
-  }
-
-  .layers-tools {
-    background-color: $color-gray-darker;
-    bottom: 0;
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    position: absolute;
-    width: 100%;
-
-    .layers-tools-content {
-      align-items: center;
-      display: flex;
-      justify-content: space-between;
-      margin: 0;
-      width: 80px;
-
-      li {
-        cursor: pointer;
-
-        svg {
-          fill: $color-gray;
-          height: 16px;
-          width: 16px;
-
-          &:hover {
-            fill: $color-white;
-          }
-
-        }
-
-        &.delete-layer {
-
-          svg {
-
-            &:hover {
-              fill: $color-danger;
-            }
-
-          }
-
-        }
-
-      }
-
-    }
-
-  }
-
-}
-
-.tool-btn {
-  align-items: center;
-  background-color: $color-gray-light;
-  cursor: pointer;
-  display: flex;
-  flex-shrink: 0;
-  height: 94px;
-  justify-content: center;
-  margin: $medium 0 0 $big;
-  width: 94px;
-
-  svg {
-    fill: $color-gray-darker;
-    height: 52px;
-    width: 52px;
-  }
-
-  &:hover {
-    background-color: $color-white;
-  }
-
-  &.selected {
-    background-color: $color-gray-darker;
-
-    svg {
-      fill: $color-primary;
-    }
-
-  }
-}
-
-.figure-btn {
-  align-items: center;
-  background-color: $color-gray-light;
-  cursor: pointer;
-  display: flex;
-  flex-shrink: 0;
-  height: 62px;
-  justify-content: center;
-  margin: $medium 0 0 $medium;
-  width: 62px;
-
-  svg {
-    fill: $color-gray-darker;
-    height: 50px;
-    width: 50px;
-  }
-
-  &:hover {
-    background-color: $color-white;
-  }
-
-  &.selected {
-    background-color: $color-gray-darker;
-    svg {
-      fill: $color-primary;
-    }
-  }
-}
-
-.element-list {
-  margin: 0;
-  width: 100%;
-
-  ul {
-    margin: 0;
-  }
-
-  li {
-    box-sizing: border-box;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    &.open {
-
-      ul {
-
-        li {
-
-          .element-list-body {
-            border-style: dashed;
-          }
-
-        }
-
-      }
-
-    }
-
-    .element-list-body {
-      align-items: center;
-      border-bottom: 1px solid $color-gray-darker;
-      box-sizing: border-box;
-      background-color: $color-gray-dark;
-      display: flex;
-      padding: $small;
-      width: 100%;
-
-      svg {
-        fill: $color-gray;
-        height: 13px;
-        margin-right: 8px;
-        width: 13px;
-      }
-
-      .element-actions {
-        align-items: center;
-        display: flex;
-        flex-shrink: 0;
-        width: 62px;
-      }
-
-      .element-icon,
-      .sublevel-element {
-
-        svg {
-          fill: $color-gray-darker;
-        }
-
-      }
-
-      .toggle-content {
-        margin-left: auto;
-        width: 12px;
-
-        svg {
-          fill: $color-gray-darker;
-          transform: rotate(90deg);
-          width: 12px;
-        }
-
-        &.inverse {
-          svg { transform: rotate(270deg); }
-        }
-
-        &:hover {
-
-          svg {
-            fill: $color-white;
-          }
-
-        }
-
-      }
-
-      &.group {
-
-        &.open {
-
-          .toggle-content {
-            flex-shrink: 0;
-
-            svg {
-              transform: rotate(270deg);
-            }
-
-          }
-
-        }
-
-      }
-
-      span {
-        color: darken($color-gray-darker, 8%);
-        font-size: $fs13;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-      }
-
-      &.selected {
-        background-color: lighten($color-gray-darker, 5%);
-
-        .element-icon {
-
-          svg {
-            fill: $color-primary;
-          }
-
-        }
-
-        span {
-          color: $color-primary;
-        }
-
-      }
-
-      .selected {
-
-        svg {
-          fill: $color-gray-lighter;
-        }
-
-      }
-
-      &:hover {
-        border-color: $color-gray-light;
-
-        .element-icon {
-
-          svg {
-            fill: $color-gray-lighter;
-          }
-
-        }
-
-        span {
-          color: $color-gray-lighter;
-        }
-
-      }
-
-      &.drag-top {
-        border-top: 2px solid $color-primary;
-      }
-
-      &.drag-bottom {
-        border-bottom: 2px solid $color-primary;
-      }
-
-      &.drag-inside {
-        border: 2px solid $color-primary;
       }
 
     }

resources/public/styles/partials/workspace-bar.scss

@@ -1,6 +1,7 @@
 .workspace-bar {
   align-items: center;
   background-color: $color-gray;
+  border-bottom: 1px solid $color-gray-dark;
   display: flex;
   height: 40px;
   padding: $x-small $medium $x-small 65px;
@@ -48,7 +49,7 @@
     box-sizing: border-box;
     cursor: pointer;
     display: flex;
-    min-width: 180px;
+    min-width: 164px;
     padding: $x-small $x-big+$x-small $x-small $medium;
 
     svg {

resources/public/styles/partials/workspace-canvas.scss

@@ -1,7 +1,7 @@
 .workspace-canvas {
   box-sizing: border-box;
   height: calc(100vh - 50px);
-  margin: 0 250px 0 250px;
+  margin: 0 230px 0 230px;
   overflow: scroll;
   width: 100%;
   transition: none;