Update inputs style

index.html

@@ -1327,6 +1327,26 @@
       //console.log('Style of ', model.get('property'), 'Target: ', targetValue, 'Computed:', computedValue, 'Default:', defaultValue);
     });
 
+    var am = editor.AssetManager;
+
+    am.addType('image', {
+  // As you adding on top of an already defined type you can avoid indicating
+  // `am.getType('image').view.extend({...` the editor will do it by default
+  // but you can eventually extend some other type
+  view: {
+    // If you want to see more methods to extend check out
+    // https://github.com/artf/grapesjs/blob/dev/src/asset_manager/view/AssetImageView.js
+    onRemove(e) {
+      e.stopPropagation();
+      const model = this.model;
+
+      if (confirm('Are you sure?')) {
+        model.collection.remove(model);
+      }
+    }
+  },
+})
+
 
     editor.render();
     </script>

src/domain_abstract/ui/InputNumber.js

@@ -19,7 +19,7 @@ module.exports = Backbone.View.extend({
     var contClass = opt.contClass || (ppfx + 'field');
     this.ppfx = ppfx;
     this.docEl = $(document);
-    this.inputCls = ppfx + 'input-number';
+    this.inputCls = ppfx + 'field-number';
     this.unitCls = ppfx + 'input-unit';
     this.contClass = contClass;
     this.events['click .' + ppfx + 'field-arrow-u'] = 'upArrowClick';

src/styles/scss/_gjs_assets.scss

@@ -44,10 +44,6 @@
   }
 }
 
-.#{$am-prefix}add-field input {
-  padding: 6px;
-}
-
 .#{$am-prefix}preview-cont {
   position: relative;
   height: 70px;

src/styles/scss/_gjs_inputs.scss

@@ -22,25 +22,26 @@
 
 .#{$app-prefix}field {
   background-color: $mainDkColor;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: 1px 1px 0 $mainLhColor;
+  border: none;
+  box-shadow: none;
   border-radius: 2px;
   box-sizing: border-box;
   padding: 0;
   position: relative;
+  color: $inputFontColor;
 
   input,
   select,
   textarea {
     @include appearance(none);
 
-    color: $inputFontColor;
+    color: inherit;
     border: none;
     background-color: transparent;
     box-sizing: border-box;
     width: 100%;
     position: relative;
-    padding: 3px 4px 4px;
+    padding: $inputPadding;
     z-index: 1;
   }
 
@@ -48,11 +49,6 @@
     resize: vertical;
   }
 
-  select {
-    height: 20px;
-    padding-right: 12px;
-  }
-
   option {
     padding: 3px 0;
   }
@@ -67,7 +63,10 @@
   }
 
   .#{$app-prefix}d-s-arrow {
-    bottom: 7px;
+    bottom: 0;
+    top: 0;
+    margin: auto;
+    right: $inputPadding;
     border-top: 4px solid $arrowColor;
     position: absolute;
     height: 0;
@@ -76,6 +75,22 @@
     border-right: 4px solid transparent;
     cursor: pointer;
   }
+
+  .#{$app-prefix}field-number {
+    padding-right: 30px;
+  }
+
+  &-arrows {
+    position: absolute;
+    cursor: ns-resize;
+    margin: auto;
+    height: 20px;
+    width: 9px;
+    z-index: 10;
+    bottom: 0;
+    right: $inputPadding - 2px;
+    top: 0;
+  }
 }
 
 .#{$app-prefix}field-color {
@@ -169,17 +184,15 @@
 .#{$app-prefix}radio-item-label {
   cursor: pointer;
   display: block;
-  padding: 4px;
+  padding: $inputPadding;
 }
 
 .#{$app-prefix}field-units {
   position: absolute;
-  right: 0;
+  margin: auto;
+  right: 10px;
+  bottom: 0;
   top: 0;
-
-  select {
-    padding: 0 12px 0 0;
-  }
 }
 
 .#{$app-prefix}field-unit {
@@ -191,16 +204,6 @@
   cursor: pointer;
 }
 
-.#{$app-prefix}field-arrows {
-  z-index: 10;
-  cursor: ns-resize;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 9px;
-}
-
 .#{$app-prefix}field-arrow-u,
 .#{$app-prefix}field-arrow-d {
   position: absolute;
@@ -265,6 +268,21 @@
   }
 }
 
+.#{$app-prefix}btn-prim {
+  @extend .#{$app-prefix}color-main;
+
+  background-color: $mainLhColor;
+  border-radius: 2px;
+  padding: 3px 6px;
+  padding: $inputPadding;
+  cursor: pointer;
+  border: none;
+
+  &:active {
+    background-color: $mainLhColor;
+  }
+}
+
 .#{$app-prefix}chk-icon {
   @include transform(rotate(45deg));
 

src/styles/scss/_gjs_variables.scss

@@ -60,6 +60,7 @@ $arrowColor: $mainLhlColor !default; /* b1b1b1 */
 $darkTextShadow: $mainDkColor !default; /* #252525 */
 $darkBorder: rgba(0, 0, 0, 0.15) !default; /* 303030 */
 $colorpSize: 22px !default;
+$inputPadding: 5px !default; // Has to be a single value
 
 /* Class manager */
 $addBtnBg: lighten($mainDkColor, 10%) !default;
@@ -74,4 +75,4 @@ $animSpeed: 0.2s !default;
 /* Fonts */
 $fontPath: '../fonts' !default;
 $fontName: 'main-fonts' !default;
-$fontV: 20 !default;//random(1000)
+$fontV: 20 !default;//random(1000)

src/styles/scss/main.scss

@@ -205,30 +205,6 @@
   @include opacity(0.50);
   pointer-events: none;
 }
-.#{$app-prefix}btn-prim{
-  @extend .#{$app-prefix}color-main;
-  background-color: $mainLhColor;
-  border-radius: 2px;
-  padding: 3px 6px;
-  cursor: pointer;
-  padding: 0.5em;
-  border: none;
-}
-.#{$app-prefix}btn-prim:active{
-  background-color: $mainLhColor;
-}
-.#{$app-prefix}input{
-  background-color: $mainDkColor;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
-  box-shadow: 1px 1px 0 $mainLhColor;
-  box-sizing: border-box;
-  color: $fontColor;
-  padding: 0.5em 1em;
-}
-.#{$app-prefix}select {
-  @extend .#{$app-prefix}input;
-}
 
 div.#{$app-prefix}select {
   padding: 0;