From 0c7d795081bf126129e7f45e7f8867d109f0003a Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Thu, 16 Oct 2025 13:06:28 +0300
Subject: [PATCH] compact-form class

---
 frontend/less/espo/custom.less           | 14 ++++++++++++++
 frontend/less/espo/elements/buttons.less |  4 ++--
 frontend/less/espo/elements/form.less    |  2 ++
 frontend/less/espo/elements/icons.less   | 16 +++++-----------
 frontend/less/espo/elements/type.less    |  2 +-
 frontend/less/espo/root-variables.less   | 11 +++++++++++
 6 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/frontend/less/espo/custom.less b/frontend/less/espo/custom.less
index 625cd4ccdb..eb2a271486 100644
--- a/frontend/less/espo/custom.less
+++ b/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);
+}
diff --git a/frontend/less/espo/elements/buttons.less b/frontend/less/espo/elements/buttons.less
index 51a818d946..72c49d76de 100644
--- a/frontend/less/espo/elements/buttons.less
+++ b/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);
diff --git a/frontend/less/espo/elements/form.less b/frontend/less/espo/elements/form.less
index 50be00e019..21cebe9a0c 100644
--- a/frontend/less/espo/elements/form.less
+++ b/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 {
diff --git a/frontend/less/espo/elements/icons.less b/frontend/less/espo/elements/icons.less
index 1ddccb039a..6979e8868e 100644
--- a/frontend/less/espo/elements/icons.less
+++ b/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),
diff --git a/frontend/less/espo/elements/type.less b/frontend/less/espo/elements/type.less
index 594dba435f..3dab594ba0 100644
--- a/frontend/less/espo/elements/type.less
+++ b/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;
diff --git a/frontend/less/espo/root-variables.less b/frontend/less/espo/root-variables.less
index 0803912a1f..adec6fe4ac 100644
--- a/frontend/less/espo/root-variables.less
+++ b/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);
 }