Fixing CSS issues with combobox in Firefox

GrapesJS · Nov 2, 2017 · 48d61bb · 48d61bb
1 parent fc0409a
commit 48d61bb
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 30 deletions.
diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js
@@ -290,17 +290,26 @@ module.exports = () => ({
           break;
         case 'font-family':
           var ss = ', sans-serif';
-          var s = ', serif';
-          var fonts = ['Arial, Helvetica' + ss, 'Arial Black, Gadget' + ss, 'Brush Script MT' + ss,
-            'Comic Sans MS, cursive' + ss, 'Courier New, Courier, monospace', 'Georgia, serif', 'Helvetica, serif',
-            'Impact, Charcoal' + ss, 'Lucida Sans Unicode, Lucida Grande' + ss, 'Tahoma, Geneva' + ss,
-            'Times New Roman, Times, serif', 'Trebuchet MS, Helvetica' + ss, 'Verdana, Geneva' + ss];
+          var fonts = [
+            'Arial, Helvetica' + ss,
+            'Arial Black, Gadget' + ss,
+            'Brush Script MT' + ss,
+            'Comic Sans MS, cursive' + ss,
+            'Courier New, Courier, monospace',
+            'Georgia, serif',
+            'Helvetica, serif',
+            'Impact, Charcoal' + ss,
+            'Lucida Sans Unicode, Lucida Grande' + ss,
+            'Tahoma, Geneva' + ss,
+            'Times New Roman, Times, serif',
+            'Trebuchet MS, Helvetica' + ss,
+            'Verdana, Geneva' + ss
+          ];
           obj.list = [];
           for(var j = 0, l = fonts.length; j < l; j++){
             var font = {};
             font.value = fonts[j];
             font.name = fonts[j].split(',')[0];
-            font.style = 'font-family: ' + fonts[j] + '; font-size:15px';
             obj.list.push(font);
           }
           break;

diff --git a/src/styles/scss/_gjs_inputs.scss b/src/styles/scss/_gjs_inputs.scss
@@ -59,7 +59,8 @@
 .#{$clm-prefix}select option,
 .#{$sm-prefix}select option,
 .#{$sm-prefix}unit option {
-  @extend .#{$app-prefix}bg-main;
+  background-color: $mainColor;
+  color: $fontColor;
 }
 
 .#{$app-prefix}field {
@@ -95,10 +96,6 @@
     resize: vertical;
   }
 
-  option {
-    padding: 3px 0;
-  }
-
   .#{$app-prefix}sel-arrow {
     height: 100%;
     width: 9px;
@@ -273,10 +270,6 @@
 
 .#{$app-prefix}field-select {
   padding: 0;
-
-  option {
-    @extend .#{$app-prefix}bg-main;
-  }
 }
 
 .#{$app-prefix}field-range {

diff --git a/test/specs/style_manager/model/Models.js b/test/specs/style_manager/model/Models.js
@@ -435,26 +435,24 @@ module.exports = {
       it('Build font-family', () => {
         var ss = ', sans-serif';
         var ms = ', monospace';
-        var ff = 'font-family: ';
-        var sty = '; font-size:15px';
         var res = {
           property: 'font-family',
           type: 'select',
           defaults: 'Arial, Helvetica' + ss,
           list:[
-            {name: 'Arial', value: 'Arial, Helvetica' + ss, style: ff + 'Arial, Helvetica' + ss + sty},
-            {name: 'Arial Black', value: 'Arial Black, Gadget' + ss,  style: ff + 'Arial Black, Gadget' + ss + sty},
-            {name: 'Brush Script MT', value: 'Brush Script MT' + ss,  style: ff + 'Brush Script MT' + ss + sty},
-            {name: 'Comic Sans MS', value: 'Comic Sans MS, cursive' + ss,  style: ff + 'Comic Sans MS, cursive' + ss + sty},
-            {name: 'Courier New', value: 'Courier New, Courier' + ms,  style: ff + 'Courier New, Courier' + ms + sty},
-            {name: 'Georgia', value: 'Georgia, serif',  style: ff + 'Georgia, serif' + sty},
-            {name: 'Helvetica', value: 'Helvetica, serif',  style: ff + 'Helvetica, serif' + sty},
-            {name: 'Impact', value: 'Impact, Charcoal' + ss,  style: ff + 'Impact, Charcoal' + ss + sty},
-            {name: 'Lucida Sans Unicode', value: 'Lucida Sans Unicode, Lucida Grande' + ss,  style: ff + 'Lucida Sans Unicode, Lucida Grande' + ss + sty},
-            {name: 'Tahoma', value: 'Tahoma, Geneva' + ss,  style: ff + 'Tahoma, Geneva' + ss + sty},
-            {name: 'Times New Roman', value: 'Times New Roman, Times, serif',  style: ff + 'Times New Roman, Times, serif' + sty},
-            {name: 'Trebuchet MS', value: 'Trebuchet MS, Helvetica' + ss,  style: ff + 'Trebuchet MS, Helvetica' + ss + sty},
-            {name: 'Verdana', value: 'Verdana, Geneva' + ss,  style: ff + 'Verdana, Geneva' + ss + sty},
+            {name: 'Arial', value: 'Arial, Helvetica' + ss},
+            {name: 'Arial Black', value: 'Arial Black, Gadget' + ss},
+            {name: 'Brush Script MT', value: 'Brush Script MT' + ss},
+            {name: 'Comic Sans MS', value: 'Comic Sans MS, cursive' + ss},
+            {name: 'Courier New', value: 'Courier New, Courier' + ms},
+            {name: 'Georgia', value: 'Georgia, serif'},
+            {name: 'Helvetica', value: 'Helvetica, serif'},
+            {name: 'Impact', value: 'Impact, Charcoal' + ss},
+            {name: 'Lucida Sans Unicode', value: 'Lucida Sans Unicode, Lucida Grande' + ss},
+            {name: 'Tahoma', value: 'Tahoma, Geneva' + ss},
+            {name: 'Times New Roman', value: 'Times New Roman, Times, serif'},
+            {name: 'Trebuchet MS', value: 'Trebuchet MS, Helvetica' + ss},
+            {name: 'Verdana', value: 'Verdana, Geneva' + ss},
           ],
         };
         expect(obj.build('font-family')).toEqual([res]);