From bf44c61020b6cf37ff75d34d8622289c757e4e55 Mon Sep 17 00:00:00 2001
From: Juan de la Cruz <juan.delacruz@kaleidos.net>
Date: Thu, 18 Feb 2016 21:08:10 +0100
Subject: [PATCH] create new styles for sidebar element options

---
 resources/public/styles/framework.scss        | 24 ++---
 resources/public/styles/main.scss             | 12 +--
 .../public/styles/partials/colorpicker.scss   |  4 +-
 ...ions.scss => sidebar-element-options.scss} | 98 ++++++++-----------
 ...ings-bar-icons.scss => sidebar-icons.scss} |  0
 ...gs-bar-layers.scss => sidebar-layers.scss} |  0
 ...-bar-sitemap.scss => sidebar-sitemap.scss} |  0
 ...ings-bar-tools.scss => sidebar-tools.scss} |  0
 .../{settings-bar.scss => sidebar.scss}       |  0
 src/uxbox/ui/workspace/sidebar/options.cljs   |  4 +-
 10 files changed, 63 insertions(+), 79 deletions(-)
 rename resources/public/styles/partials/{element-options.scss => sidebar-element-options.scss} (61%)
 rename resources/public/styles/partials/{settings-bar-icons.scss => sidebar-icons.scss} (100%)
 rename resources/public/styles/partials/{settings-bar-layers.scss => sidebar-layers.scss} (100%)
 rename resources/public/styles/partials/{settings-bar-sitemap.scss => sidebar-sitemap.scss} (100%)
 rename resources/public/styles/partials/{settings-bar-tools.scss => sidebar-tools.scss} (100%)
 rename resources/public/styles/partials/{settings-bar.scss => sidebar.scss} (100%)

diff --git a/resources/public/styles/framework.scss b/resources/public/styles/framework.scss
index 7883d1e4eb..a4c8b9ea95 100644
--- a/resources/public/styles/framework.scss
+++ b/resources/public/styles/framework.scss
@@ -676,7 +676,7 @@ input[type=range]::-webkit-slider-runnable-track {
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-  background: darken($color-gray-darker, 12%);
+  background: $secondary-ui-bg;
   border-radius: 25px;
   border: 0px solid #000101;
 }
@@ -686,13 +686,13 @@ input[type=range]::-webkit-slider-thumb {
   height: 24px;
   width: 8px;
   border-radius: 7px;
-  background: $color-gray-lighter;
+  background: $dark-ui-icons;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: -8px;
 }
 input[type=range]:focus::-webkit-slider-runnable-track {
-  background: darken($color-gray-darker, 12%);
+  background: $secondary-ui-bg;
 }
 input[type=range]::-moz-range-track {
   width: 100%;
@@ -700,7 +700,7 @@ input[type=range]::-moz-range-track {
   cursor: pointer;
   animate: 0.2s;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
-  background: darken($color-gray-darker, 12%);
+  background: $secondary-ui-bg;
   border-radius: 25px;
   border: 0px solid #000101;
 }
@@ -710,7 +710,7 @@ input[type=range]::-moz-range-thumb {
   height: 24px;
   width: 8px;
   border-radius: 7px;
-  background: $color-gray-lighter;
+  background: $dark-ui-icons;
   cursor: pointer;
 }
 input[type=range]::-ms-track {
@@ -724,13 +724,13 @@ input[type=range]::-ms-track {
   color: transparent;
 }
 input[type=range]::-ms-fill-lower {
-  background: darken($color-gray-darker, 12%);
+  background: $secondary-ui-bg;
   border: 0px solid #000101;
   border-radius: 50px;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
 }
 input[type=range]::-ms-fill-upper {
-  background: darken($color-gray-darker, 12%);
+  background: $secondary-ui-bg;
   border: 0px solid #000101;
   border-radius: 50px;
   box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
@@ -741,14 +741,14 @@ input[type=range]::-ms-thumb {
   height: 24px;
   width: 8px;
   border-radius: 7px;
-  background: $color-gray-lighter;
+  background: $dark-ui-icons;
   cursor: pointer;
 }
 input[type=range]:focus::-ms-fill-lower {
-  background: darken($color-gray-darker, 12%);
+  background: $secondary-ui-bg;
 }
 input[type=range]:focus::-ms-fill-upper {
-  background: darken($color-gray-darker, 12%);
+  background: $secondary-ui-bg;
 }
 
 // Scroll bar (chrome)
@@ -782,7 +782,7 @@ input[type=range]:focus::-ms-fill-upper {
     &::after {
       background-color: $color-white;
       border-radius: $br-small;
-      color: $color-gray-dark;
+      color: $light-ui-text;
       content: attr(alt);
       font-size: $fs11;
       font-weight: bold;
@@ -820,7 +820,7 @@ input[type=range]:focus::-ms-fill-upper {
         background-color: rgba(255,255,255,.7);
         box-sizing: border-box;
         border-radius: 0;
-        color: $color-gray-darker;
+        color: $dark-ui-text;
         display: flex;
         height: 100%;
         justify-content: center;
diff --git a/resources/public/styles/main.scss b/resources/public/styles/main.scss
index d558540236..a156e3a176 100644
--- a/resources/public/styles/main.scss
+++ b/resources/public/styles/main.scss
@@ -35,12 +35,12 @@
 @import 'partials/workspace-canvas';
 @import 'partials/tool-bar';
 @import 'partials/project-bar';
-@import 'partials/settings-bar';
-@import 'partials/settings-bar-tools';
-@import 'partials/element-options';
-@import 'partials/settings-bar-icons';
-@import 'partials/settings-bar-layers';
-@import 'partials/settings-bar-sitemap';
+@import 'partials/sidebar';
+@import 'partials/sidebar-tools';
+@import 'partials/sidebar-element-options';
+@import 'partials/sidebar-icons';
+@import 'partials/sidebar-layers';
+@import 'partials/sidebar-sitemap';
 @import 'partials/dashboard-bar';
 @import 'partials/dashboard-grid';
 @import 'partials/activity-bar';
diff --git a/resources/public/styles/partials/colorpicker.scss b/resources/public/styles/partials/colorpicker.scss
index 63bfc9e619..9369530681 100644
--- a/resources/public/styles/partials/colorpicker.scss
+++ b/resources/public/styles/partials/colorpicker.scss
@@ -1,6 +1,8 @@
 .colorpicker {
+
   canvas {
     border: 1px solid #111111;
     cursor: cell;
   }
-}
\ No newline at end of file
+  
+}
diff --git a/resources/public/styles/partials/element-options.scss b/resources/public/styles/partials/sidebar-element-options.scss
similarity index 61%
rename from resources/public/styles/partials/element-options.scss
rename to resources/public/styles/partials/sidebar-element-options.scss
index e02033afc2..3d5d1c9699 100644
--- a/resources/public/styles/partials/element-options.scss
+++ b/resources/public/styles/partials/sidebar-element-options.scss
@@ -1,27 +1,26 @@
 .element-options {
   display: flex;
-  position: absolute;
-  transition: all .1s ease;
 
   .element-icons {
-    background-color: $color-white;
-    border: 1px solid darken($color-gray-lighter, 5%);
+    background-color: $primary-ui-bg;
+    border: 1px solid $bright-ui-border;
     border-radius: $br-small;
     display: flex;
-    flex-direction: column;
     height: 100%;
-    margin: 0;
+    margin: $x-small 0 $x-small $x-small;
 
     li {
       align-items: center;
-      border-bottom: 1px solid $color-gray-lighter;
+      border-right: 1px solid $bright-ui-border;
       border-radius: $br-small;
       cursor: pointer;
       display: flex;
+      flex: 1;
+      justify-content: center;
       padding: $small;
 
       svg {
-        fill: $color-gray;
+        fill: $dark-ui-icons;
         height: 15px;
         width: 15px;
       }
@@ -35,10 +34,10 @@
       }
 
       &.selected {
-        background-color: $color-gray-darker;
+        background-color: $main-ui-color;
 
         svg {
-          fill: $main-ui-color;
+          fill: $color-white;
         }
 
       }
@@ -52,18 +51,13 @@
   }
 
   .element-set {
-    background-color: $color-gray-darker;
-    border-radius: $br-small;
-    color: $color-gray-light;
+    color: $light-ui-text;
     margin-left: $x-small;
-    width: 220px;
 
     .element-set-title {
-      background-color: $color-gray-dark;
-      border-top-left-radius: $br-small;
-      border-top-right-radius: $br-small;
       box-sizing: border-box;
-      color: $color-gray-lighter;
+      border-bottom: 1px dashed $bright-ui-border;
+      color: $light-ui-text;
       font-weight: bold;
       padding: 2px $x-small;
       width: 100%;
@@ -80,30 +74,32 @@
 
   .input-text {
     background-color: transparent;
-    border-color: $color-gray;
+    border-color: $bright-ui-border;
     box-sizing: border-box;
+    color: $dark-ui-text;
     font-size: $fs13;
     margin: $x-small;
     padding: $x-small;
     width: 100%;
 
     &:focus {
-      color: $color-white;
-      border-color: $color-white;
+      color: darken($dark-ui-text, 8%);
+      border-color: $dark-ui-border;
     }
 
   }
 
   .input-select {
+    color: $dark-ui-text;
 
     &:focus {
-      color: $color-gray;
+      color: darken($dark-ui-text, 8%);
     }
 
   }
 
   span {
-    color: darken($color-gray-darker, 20%);
+    color: $light-ui-text;
     font-size: $fs12;
   }
 
@@ -112,7 +108,7 @@
     width: 20%;
 
     svg {
-      fill: $color-gray-light;
+      fill: $light-ui-text;
       height: 15px;
       width: 15px;
 
@@ -135,74 +131,57 @@
 }
 
 .color-th {
-  background-color: $color-gray-light;
+  background-color: $color-gray-lighter;
   border-radius: 50%;
   cursor: pointer;
   flex-shrink: 0;
   height: 25px;
   margin: 5px 4px 0 4px;
   width: 25px;
+
   &.palette-th {
     align-items: center;
-    background-color: $color-gray-darker;
-    border: 2px solid $color-gray-light;
+    border: 2px solid $light-ui-icons;
     display: flex;
     justify-content: center;
+
     svg {
-      fill: $color-gray-light;
+      fill: $light-ui-icons;
       height: 18px;
       width: 18px;
     }
+
     &:hover {
       border-color: $main-ui-color;
       svg {
         fill: $main-ui-color;
       }
-    }
-  }
-}
 
-// .border-element {
-//   align-items: center;
-//   display: flex;
-//   flex-direction: column;
-//   margin: 5px 2% 0 2%;
-//   svg {
-//     fill: $color-gray-light;
-//     height: 12px;
-//     width: 12px;
-//   }
-//   &.top-left {
-//     svg {
-//       transform: rotate(270deg);
-//     }
-//   }
-//   &.bottom-left {
-//     svg {
-//       transform: rotate(180deg);
-//     }
-//   }
-//   &.bottom-right {
-//     svg {
-//       transform: rotate(90deg);
-//     }
-//   }
-// }
+    }
+
+  }
+
+}
 
 .align-icons {
   cursor: pointer;
+
   svg {
-    fill: $color-gray-light;
+    fill: $light-ui-icons;
     height: 20px;
     margin: 5px 7px 0 7px;
     width: 20px;
   }
+
   &:hover,
   &.current {
+
     svg {
       fill: $main-ui-color;
     }
+
   }
+
 }
 
 .element-color-picker {
@@ -216,6 +195,7 @@
     height: 100%;
     margin-right: 15px;
   }
+
   .color-picker-bar {
     height: 165px;
     position: relative;
@@ -229,5 +209,7 @@
       width: 23px;
       top: 30%;
     }
+
   }
+
 }
diff --git a/resources/public/styles/partials/settings-bar-icons.scss b/resources/public/styles/partials/sidebar-icons.scss
similarity index 100%
rename from resources/public/styles/partials/settings-bar-icons.scss
rename to resources/public/styles/partials/sidebar-icons.scss
diff --git a/resources/public/styles/partials/settings-bar-layers.scss b/resources/public/styles/partials/sidebar-layers.scss
similarity index 100%
rename from resources/public/styles/partials/settings-bar-layers.scss
rename to resources/public/styles/partials/sidebar-layers.scss
diff --git a/resources/public/styles/partials/settings-bar-sitemap.scss b/resources/public/styles/partials/sidebar-sitemap.scss
similarity index 100%
rename from resources/public/styles/partials/settings-bar-sitemap.scss
rename to resources/public/styles/partials/sidebar-sitemap.scss
diff --git a/resources/public/styles/partials/settings-bar-tools.scss b/resources/public/styles/partials/sidebar-tools.scss
similarity index 100%
rename from resources/public/styles/partials/settings-bar-tools.scss
rename to resources/public/styles/partials/sidebar-tools.scss
diff --git a/resources/public/styles/partials/settings-bar.scss b/resources/public/styles/partials/sidebar.scss
similarity index 100%
rename from resources/public/styles/partials/settings-bar.scss
rename to resources/public/styles/partials/sidebar.scss
diff --git a/src/uxbox/ui/workspace/sidebar/options.cljs b/src/uxbox/ui/workspace/sidebar/options.cljs
index f049701a9f..a279abbd59 100644
--- a/src/uxbox/ui/workspace/sidebar/options.cljs
+++ b/src/uxbox/ui/workspace/sidebar/options.cljs
@@ -525,11 +525,11 @@
     (html
      [:div.elementa-options.tool-window
       [:div.tool-window-bar
-       [:div.tool-window-icon i/project-tree]
+       [:div.tool-window-icon i/shapes]
        [:span (tr "ds.element-options")]
        [:div.tool-window-close {:on-click close} i/close]]
       [:div.tool-window-content
-       [:div.element-options.tool-window
+       [:div.element-options
         (if shape
           (options-menus shape))]]])))