compact-form class

frontend/less/espo/custom.less

@@ -4269,3 +4269,17 @@ body > .autocomplete-suggestions.text-search-suggestions {
 @import "elements/popup-notification.less";
 @import "elements/grid.less";
 @import "elements/animation.less";
+
+.compact-form {
+    --input-height-base: var(--input-height-small);
+    --line-height-computed: var(--line-height-small);
+    --line-height-base: var(--line-height-small);
+    --font-size-base: var(--font-size-small);
+    --padding-base-vertical: var(--padding-small-vertical);
+    --padding-base-horizontal: var(--padding-small-horizontal);
+
+    --icon-size-base: var(--icon-size-small);
+    --icon-line-height-base: var(--icon-line-height-small);
+
+    --btn-icon-width: var(--btn-icon-width-small);
+}

frontend/less/espo/elements/buttons.less

@@ -98,7 +98,7 @@ a.btn {
 }
 
 .btn-icon {
-    width: var(--36px);
+    width: var(--btn-icon-width);
     padding-left: 0;
     padding-right: 0;
 
@@ -117,7 +117,7 @@ a.btn {
 }
 
 .btn-icon.btn-sm {
-    width: var(--34px);
+    width: var(--btn-icon-width-small);
 
     .fa, .fas {
         font-size: var(--12px);

frontend/less/espo/elements/form.less

@@ -495,6 +495,8 @@ input[type="radio"].form-radio {
 
 .control-label {
     user-select: none;
+
+    font-size: var(--font-size-base);
 }
 
 .form-group.hidden-cell {

frontend/less/espo/elements/icons.less

@@ -1,8 +1,8 @@
 .fas,
 .far,
 .fa {
-    font-size: var(--16px);
-    line-height: var(--21px);
+    font-size: var(--icon-size-base);
+    line-height: var(--icon-line-height-base);
 }
 
 .btn {
@@ -11,7 +11,7 @@
         line-height: var(--line-height-computed);
 
         &.fa-sm {
-            line-height: var(--18px);
+            line-height: var(--icon-line-height-small);
         }
     }
 }
@@ -24,14 +24,8 @@
 .small .fas,
 .fas.small,
 .far.small {
-    font-size: var(--12px);
-    line-height: var(--18px);
-}
-
-.btn:not(.btn-sm) {
-    > .fas.fa-ellipsis-h {
-        //line-height: var(--23px);
-    }
+    font-size: var(--icon-size-small);
+    line-height: var(--icon-line-height-small);
 }
 
 .btn:not(.btn-sm),

frontend/less/espo/elements/type.less

@@ -152,7 +152,7 @@ label {
 
 .label-md {
     font-weight: normal;
-    font-size: 100%;
+    font-size: var(--font-size-base);
     padding: var(--1px) var(--7px) var(--2px);
     top: 0;
     line-height: 1.8;

frontend/less/espo/root-variables.less

@@ -510,4 +510,15 @@
     --top-bar-box-shadow: @top-bar-box-shadow-value;
 
     --vertical-gap: @vertical-gap-value;
+
+    //
+
+    --icon-size-base: var(--16px);
+    --icon-line-height-base: var(--21px);
+
+    --icon-size-small: var(--12px);
+    --icon-line-height-small: var(--18px);
+
+    --btn-icon-width: var(--36px);
+    --btn-icon-width-small: var(--34px);
 }