feat(calendar): move hardcoded values to less variables

Moves some hardcoded values into LESS variables as discussed in #2866
fomantic · Aug 2, 2023 · 9025236 · 9025236
1 parent 1afaf65
commit 9025236
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/src/definitions/modules/calendar.less b/src/definitions/modules/calendar.less
@@ -60,24 +60,24 @@
 .ui.calendar .ui.table.year,
 .ui.calendar .ui.table.month,
 .ui.calendar .ui.table.minute {
-    min-width: 15em;
+    min-width: @widthYearMonthMinute;
 }
 
 .ui.calendar .ui.table.day {
-    min-width: 18em;
+    min-width: @widthDay;
 }
 
 .ui.calendar .ui.table.day.andweek {
-    min-width: 22em;
+    min-width: @widthDayAndWeek;
 }
 
 .ui.calendar .ui.table.hour {
-    min-width: 20em;
+    min-width: @widthHour;
 }
 
 .ui.calendar .ui.table tr th,
 .ui.calendar .ui.table tr td {
-    padding: 0.5em;
+    padding: @cellPadding;
     white-space: nowrap;
 }
 
@@ -100,27 +100,27 @@
 }
 
 .ui.calendar .ui.table.day tr:nth-child(2) th {
-    padding-top: 0.2em;
-    padding-bottom: 0.3em;
+    padding-top: @cellHeaderTopPadding;
+    padding-bottom: @cellHeaderBottomPadding;
 }
 
 .ui.calendar .ui.table tr td {
-    padding-left: 0.1em;
-    padding-right: 0.1em;
+    padding-left: @cellLeftRightPadding;
+    padding-right: @cellLeftRightPadding;
 }
 
 .ui.calendar .ui.table tr .link {
     cursor: pointer;
 }
 
 .ui.calendar .ui.table tr .prev.link {
-    width: 14.28571%;
+    width: @widthPrevNext;
     position: absolute;
     left: 0;
 }
 
 .ui.calendar .ui.table tr .next.link {
-    width: 14.28571%;
+    width: @widthPrevNext;
     position: absolute;
     right: 0;
 }
@@ -211,16 +211,16 @@
         .ui.@{value}.calendar .ui.table.year,
         .ui.@{value}.calendar .ui.table.month,
         .ui.@{value}.calendar .ui.table.minute {
-            min-width: unit(15 * @s, em);
+            min-width: unit(@widthYearMonthMinute * @s, em);
         }
         .ui.@{value}.calendar .ui.table.day {
-            min-width: unit(18 * @s, em);
+            min-width: unit(@widthDay * @s, em);
         }
         .ui.@{value}.calendar .ui.table.day.andweek {
-            min-width: unit(22 * @s, em);
+            min-width: unit(@widthDayAndWeek * @s, em);
         }
         .ui.@{value}.calendar .ui.table.hour {
-            min-width: unit(20 * @s, em);
+            min-width: unit(@widthHour * @s, em);
         }
     });
 }

diff --git a/src/themes/default/modules/calendar.variables b/src/themes/default/modules/calendar.variables
@@ -23,3 +23,14 @@
 
 @multiMonthMargin: -1rem;
 @multiMonthPadding: 0;
+
+@cellPadding: 0.5em;
+@cellLeftRightPadding: 0.1em;
+@cellHeaderTopPadding: 0.2em;
+@cellHeaderBottomPadding: 0.3em;
+
+@widthPrevNext: (100% / 7);
+@widthYearMonthMinute: 15em;
+@widthDay: 18em;
+@widthDayAndWeek: 22em;
+@widthHour: 20em;