qfq-bs.css.less: Styling of 'characterCountWrap'

extension/qfq/qfq/Constants.php

@@ -466,6 +466,9 @@ const DATA_TYPEAHEAD_SIP = 'data-typeahead-sip'; // Used for typeAhead
 const DATA_TYPEAHEAD_LIMIT = 'data-typeahead-limit';
 const DATA_TYPEAHEAD_MINLENGTH = 'data-typeahead-minlength';
 
+const CLASS_CHARACTER_COUNT = 'qfq-character-count';
+const DATA_CHARACTER_COUNT_ID = 'data-character-count-id';
+
 // BuildForm
 const SYMBOL_NEW = 'new';
 const SYMBOL_EDIT = 'edit';
@@ -613,6 +616,7 @@ const FE_TYPEAHEAD_LDAP_BASE_DN = 'typeAheadLdapBaseDn';
 const FE_TYPEAHEAD_LDAP_SEARCH = 'typeAheadLdapSearch';
 const FE_TYPEAHEAD_LDAP_VALUE_PRINTF = 'typeAheadLdapValuePrintf';
 const FE_TYPEAHEAD_LDAP_KEY_PRINTF = 'typeAheadLdapKeyPrintf';
+const FE_CHARACTER_COUNT_WRAP = 'characterCountWrap';
 const RETYPE_FE_NAME_EXTENSION = 'RETYPE';
 
 const FE_HTML_ID = 'htmlId'; // Will be dynamically computed during runtime.
@@ -647,6 +651,7 @@ const HTML_ID_EXTENSION_INPUT = '-i';
 const HTML_ID_EXTENSION_NOTE = '-n';
 const HTML_ID_EXTENSION_TOOLTIP = '-t';
 const HTML_ID_EXTENSION_ROW = '-r';
+const HTML_ID_EXTENSION_CHARACTER_COUNT = '-cc';
 
 const QUERY_TYPE_SELECT = 'type: select,show,describe,explain';
 const QUERY_TYPE_INSERT = 'type: insert';

less/qfq-bs.css.less

@@ -134,6 +134,13 @@ i.@{spinner_class} {
   display: block !important;
 }
 
+.qfq-cc-style {
+  font-size: 0.8em;
+  text-color: #ededed;
+  padding-left: 14px;
+  padding-top: 2px;
+}
+
 // TypeAhead Suggestions
 .tt-menu {
   background-color: #fff;