focus color

client/src/views/fields/wysiwyg.js

@@ -151,6 +151,12 @@ define('views/fields/wysiwyg', ['views/fields/text', 'lib!Summernote'], function
             'click .note-editable': function () {
                 this.fixPopovers();
             },
+            'focus .note-editable': function () {
+                this.$noteEditor.addClass('in-focus');
+            },
+            'blur .note-editable': function () {
+                this.$noteEditor.removeClass('in-focus');
+            },
         },
 
         setupToolbar: function () {
@@ -224,7 +230,6 @@ define('views/fields/wysiwyg', ['views/fields/text', 'lib!Summernote'], function
             return value || '';
         },
 
-
         sanitizeHtmlLight: function (value) {
            return this.getHelper().moderateSanitizeHtml(value);
         },
@@ -244,7 +249,6 @@ define('views/fields/wysiwyg', ['views/fields/text', 'lib!Summernote'], function
 
             if (this.isEditMode()) {
                 this.$summernote = this.$el.find('.summernote');
-                this.$noteEditor = this.$el.find('> .note-editor');
             }
 
             var language = this.getConfig().get('language');
@@ -260,6 +264,8 @@ define('views/fields/wysiwyg', ['views/fields/text', 'lib!Summernote'], function
                 else {
                     this.$element.removeClass('hidden');
                 }
+
+                this.$noteEditor = this.$el.find('> .note-editor');
             }
 
             if (this.isReadMode()) {

frontend/less/espo/custom.less

@@ -1649,10 +1649,6 @@ table.less-padding td.cell[data-name="buttons"] > .btn-group {
 }
 
 .panel.note-editor {
-    border: var(--input-border-width) solid var(--input-border);
-    border-width: var(--input-border-width);
-    border-radius: var(--border-radius);
-
     .note-toolbar {
         border-bottom: 0 !important;
         background-color: transparent;

frontend/less/espo/elements/form.less

@@ -20,6 +20,8 @@
     border-radius: var(--border-radius);
     box-shadow: var(--input-box-shadow);
 
+    .form-control-focus-espo();
+
     &.dropdown-active {
         border-color: var(--input-border-focus-rgba);
         border-radius: var(--border-radius);
@@ -28,6 +30,20 @@
     .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
 }
 
+.note-editor.note-frame {
+    border: var(--input-border-width) solid var(--input-border);
+    border-width: var(--input-border-width);
+    border-radius: var(--border-radius);
+
+    &.in-focus {
+        border-color: var(--input-border-focus-rgba);
+        outline: 0;
+        .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px var(--input-border-focus-rgba)");
+    }
+
+    .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
+}
+
 .input-group > .input-group-btn:not(:first-child) > .btn:first-child {
     border-top-left-radius: 0 !important;
     border-bottom-left-radius: 0 !important;

frontend/less/espo/misc/selectize/selectize.bootstrap3.less

@@ -117,10 +117,10 @@
 		display: none;
 	}
 	&.focus {
-		@color: @input-border-focus;
+		//@color: @input-border-focus;
 		@color-rgba: var(--input-border-focus-rgba);
-		border-color: @color;
-		outline: 0;
+		//border-color: @color;
+		//outline: 0;
 		.selectize-box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
 	}
 }