add sePalette - in progress

src/editor/svgedit.css

@@ -1,6 +1,5 @@
 @import "./jgraduate/css/jGraduate.css";
 @import "./jgraduate/css/jPicker.css";
-@import "./spinbtn/jQuery.SpinButton.css";
 
 
 body {
@@ -121,36 +120,11 @@ select {
   overflow: hidden;
 }
 
-#palette_holder {
-  overflow: hidden;
-  margin-top: 5px;
-  padding: 5px;
-  position: absolute;
-  right: 15px;
-  height: 16px;
-  background: #f0f0f0;
-  border-radius: 3px;
-  z-index: 2;
-}
-
-#stroke_bg,
-#fill_bg {
-  height: 16px;
-  width: 16px;
-  margin: 1px;
-}
-
 #linkLabel > svg {
   height: 20px;
   padding-top: 4px;
 }
 
-#palette {
-  float: left;
-  width: 632px;
-  height: 16px;
-}
-
 #workarea {
   display: inline-table-cell;
   position:absolute;
@@ -301,16 +275,6 @@ select {
   display: block;
 }
 
-div.palette_item {
-  height: 15px;
-  width: 15px;
-  float: left;
-}
-
-div.palette_item:first-child {
-  background: white;
-}
-
 /* Main button
 —————————————————————————————*/
 
@@ -476,7 +440,6 @@ div.palette_item:first-child {
   stroke-dasharray: 0;
   opacity: 1;
   pointer-events: stroke;
-  vector-effect: non-scaling-stroke;
   filter: none;
 }
 
@@ -720,64 +683,19 @@ input[type=text] {
 }
 
 #tools_bottom {
-  position: absolute;
-  left: 40px;
-  right: 0;
+  position: fixed;
   bottom: 0;
+  width: 100%;
   height: 40px;
-  overflow: visible;
-}
-
-#tools_bottom_1 {
-  width: 115px;
-  float: left;
-}
-
-#tools_bottom input[type=text] {
-  width: 4em;
-}
-
-/* Color tools: fill, stroke, opacity
-–––––––––––––––––––––––––––––––––––––*/
-
-#tools_bottom_2 {
-  float: left;
-  width: 300px;
-  position: relative;
-  margin-top: 5px;
-  transition: width 150ms ease;
-}
-
-.expanded #tools_bottom_2 {
-  width: 450px;
-}
-
-#tools_bottom #tools_bottom_2 .dropdown button {
-  margin-top: 2px;
+  display: flex;
+  flex-flow: row nowrap;
+  overflow-x: auto;
 }
 
 .dropdown li.tool_button {
   width: 24px;
 }
 
-#tools_bottom_2 .icon_label {
-  display: block;
-  margin: 3px 5px;
-  padding: 0;
-}
-
-#tool_opacity { right: 0;}
-#tool_fill { left: 0; }
-#tool_stroke { left: 60px;}
-
-#fill_color,  #stroke_color {
-  height: 16px;
-  width: 16px;
-  border: 1px solid #808080;
-  cursor: pointer;
-  overflow: hidden;
-}
-
 #stroke_expand {
   width: 0;
   overflow: hidden;
@@ -801,10 +719,6 @@ input[type=text] {
   color: #666;
 }
 
-.expanded #tool_stroke.color_tool {
-  width: 280px;
-}
-
 .expanded #toggle_stroke_tools:before {
   content: '<<';
 }
@@ -813,71 +727,11 @@ input[type=text] {
   background: white;
 }
 
-.color_tool {
-  position: absolute;
-  overflow: hidden;
-  background: #f0f0f0;
-  height: 26px;
-  line-height: 26px;
-  border-radius: 3px;
-  min-width: 52px;
-}
-
-#tool_stroke.color_tool {
-  width: 130px;
-  z-index: 2;
-  -webkit-transition: width 150ms ease;
-  -moz-transition: width 150ms ease;
-  -o-transition: width 150ms ease;
-  -ms-transition: width 150ms ease;
-  transition: width 150ms ease;
-}
-
-.color_block {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.color_block svg {
-  display: block;
-}
-
-.color_tool > * {
-  float: left;
-  margin-right: 5px;
-}
-
-.color_tool .dropdown > * {
-  float: left;
-}
-
-.color_tool #stroke_width {
-  margin-left: 25px;
-  float: left;
-}
-
-.color_tool > .color_block {
-  top: 3px;
-  left: 29px;
-}
-
-.color_tool input {
-  margin: 0;
-}
-
 #tool_opacity {
   overflow: visible;
 }
 
 @media screen and (max-width:1250px) {
-  .expanded #palette_holder {
-    left: 560px;
-    overflow-x: scroll;
-    padding: 0 5px;
-    margin-top: 2px;
-    height: 30px;
-  }
   #tools_top {
     height: 71px;
   }
@@ -902,16 +756,6 @@ input[type=text] {
   }
 }
 
-@media screen and (max-width:1100px) {
-  #tools_bottom:not(.expanded) #palette_holder {
-    left: 410px;
-    overflow-x: scroll;
-    padding: 0 5px;
-    margin-top: 2px;
-    height: 30px;
-  }
-}
-
 /*–––––––––––––––––––––––––––––––––––––*/
 
 #option_lists ul {
@@ -954,10 +798,6 @@ ul li.current {
   -webkit-border-radius: 0;
 }
 
-#tools_bottom .dropdown button {
-  margin-top: 2px;
-}
-
 #opacity_dropdown li {
   width: 140px;
 }