Merge pull request #512 from Jumplead/spectrum-css-changes Fixes #505

Added more specific classes to Spectrum colour packer

src/styles/scss/main.scss

@@ -741,71 +741,71 @@
 @import 'gjs_rte';
 
 /********* Spectrum **********/
+.gjs-editor-cont {
+    .sp-hue, .sp-slider{ cursor: row-resize;}
+    .sp-color, .sp-dragger{ cursor: crosshair;}
+    .sp-alpha-inner, .sp-alpha-handle{cursor: col-resize;}
+    .sp-hue{ left: 90%; }
+    .sp-color{right: 15%;}
+    .sp-container {
+      @extend .#{$app-prefix}bg-main;
+      border: 1px solid $mainDkColor;
+      box-shadow: 0 0 7px $mainDkColor;
+      border-radius: 3px;
+    }
+    .sp-picker-container{border:none;}
+    .colpick_dark .colpick_color {  outline: 1px solid $mainDkColor;}
+    .sp-cancel, .sp-cancel:hover {
+      bottom: -8px;
+      color: #777 !important;
+      font-size: 25px;
+      left: 0;
+      position: absolute;
+      text-decoration:none;
+    }
+    .sp-alpha-handle {
+      background-color: #ccc;
+      border: 1px solid #555;
+      width: 4px;
+    }
+    .sp-color, .sp-hue { border: 1px solid #333333;}
+    .sp-slider {
+      background-color: #ccc;
+      border: 1px solid #555;
+      height: 3px;
+      left: -4px;
+      width: 22px;
+    }
+    .sp-dragger{background:transparent; box-shadow: 0 0 0 1px #111;}
+    .sp-button-container{
+    	float: none;
+    	width: 100%;
+    	position: relative;
+    	text-align: right;
+    }
+    .sp-container button, .sp-container button:hover, .sp-container button:active{
+    	background: $mainDkColor;
+      border-color: $mainDkColor;
+      color: $fontColor;
+      text-shadow: none;
+      box-shadow: none;
+      padding: 3px 5px;
+    }
+    .sp-palette-container{
+      border: none;
+      float:none;
+      margin:0;
+      padding:5px 10px 0;
+    }
+    .sp-palette .sp-thumb-el, .sp-palette .sp-thumb-el:hover{
+      border: 1px solid rgba(0, 0, 0, 0.9);
+    }
 
-.sp-hue, .sp-slider{ cursor: row-resize;}
-.sp-color, .sp-dragger{ cursor: crosshair;}
-.sp-alpha-inner, .sp-alpha-handle{cursor: col-resize;}
-.sp-hue{ left: 90%; }
-.sp-color{right: 15%;}
-.sp-container {
-  @extend .#{$app-prefix}bg-main;
-  border: 1px solid $mainDkColor;
-  box-shadow: 0 0 7px $mainDkColor;
-  border-radius: 3px;
-}
-.sp-picker-container{border:none;}
-.colpick_dark .colpick_color {  outline: 1px solid $mainDkColor;}
-.sp-cancel, .sp-cancel:hover {
-  bottom: -8px;
-  color: #777 !important;
-  font-size: 25px;
-  left: 0;
-  position: absolute;
-  text-decoration:none;
-}
-.sp-alpha-handle {
-  background-color: #ccc;
-  border: 1px solid #555;
-  width: 4px;
-}
-.sp-color, .sp-hue { border: 1px solid #333333;}
-.sp-slider {
-  background-color: #ccc;
-  border: 1px solid #555;
-  height: 3px;
-  left: -4px;
-  width: 22px;
-}
-.sp-dragger{background:transparent; box-shadow: 0 0 0 1px #111;}
-.sp-button-container{
-	float: none;
-	width: 100%;
-	position: relative;
-	text-align: right;
-}
-.sp-container button, .sp-container button:hover, .sp-container button:active{
-	background: $mainDkColor;
-  border-color: $mainDkColor;
-  color: $fontColor;
-  text-shadow: none;
-  box-shadow: none;
-  padding: 3px 5px;
-}
-.sp-palette-container{
-  border: none;
-  float:none;
-  margin:0;
-  padding:5px 10px 0;
-}
-.sp-palette .sp-thumb-el, .sp-palette .sp-thumb-el:hover{
-  border: 1px solid rgba(0, 0, 0, 0.9);
-}
-
-.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
-  border-color: rgba(0, 0, 0, 0.9);
+    .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
+      border-color: rgba(0, 0, 0, 0.9);
+    }
 }
 
-
 .#{$app-prefix}hidden {
   display: none;
 }