refactor(less variables): add variables to less for new components

add variables for AvatarGrid add variables for Testimonial
eea · Mar 3, 2022 · 47df026 · 47df026
1 parent f7f469b
commit 47df026
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 23 deletions.
diff --git a/theme/themes/eea/extras/avatarGrid.less b/theme/themes/eea/extras/avatarGrid.less
@@ -8,18 +8,18 @@
 --------------------*/
 
 .eea.avatar-grid {
-  width: 100%;
+  width: @avatarGridWidth;
   .wrapper {
-    width: 100%;
+    width: @avatarGridWrapperWidth;
     .content {
-      width: 100%;
+      width: @avatarGridContentWidth;
       display: flex;
       flex-direction: column;
 
       .grid-title {
-        width: 100%;
-        font-weight: 700;
-        font-size: 36px;
+        width: @avatarGridContentTitleWidth;
+        font-weight: @avatarGridContentTitleFontWeight;
+        font-size: @avatarGridContentTitleFontSize;
         text-align: center;
       }
 
@@ -30,12 +30,12 @@
       .avatar.group {
         display: flex;
         justify-content: center;
-        width: 100%;
-        margin-top: 67.54px;
+        width: @avatarGroupWidth;
+        margin-top: @avatarGroupMarginTop;
 
         .avatar-wrapper {
-          padding-left: 32px;
-          padding-right: 32px;
+          padding-left: @avatarGroupWrapperPaddingRight;
+          padding-right: @avatarGroupWrapperPaddingRight;
         }
       }
     }

diff --git a/theme/themes/eea/extras/avatarGrid.variables b/theme/themes/eea/extras/avatarGrid.variables
@@ -2,20 +2,18 @@
             Avatar Grid
 *******************************/
 
-@avatarGridWidth                    : 100%;
+@avatarGridWidth: 100%;
 @avatarGridWrapperWidth             : 100%;
 @avatarGridContentWidth             : 100%;
-@avatarGridContentTitleWidth        : 100%;
 
-*/Grid Title /*
+/* Grid Title */
 @avatarGridContentTitleWidth        : 100%;
 @avatarGridContentTitleFontWeight   : 700;
 @avatarGridContentTitleFontSize     : 36px;
 @avatarGridContentTitleLineHeight   : 20px;
 
 
-*/ Avatar Group /*
-@avatarGroupWidth                   : 100%;
+/* Avatar Group */
 @avatarGroupWidth                   : 100%;
 @avatarGroupMarginTop               : 67.54px;
 @avatarGroupWrapperPaddingLeft      : 32px; 

diff --git a/theme/themes/eea/extras/testimonial.less b/theme/themes/eea/extras/testimonial.less
@@ -8,21 +8,20 @@
 --------------------*/
 
 .eea.testimonial {
-  width: 100%;
+  width: @testimonialWidth;
 
   .avatar-wrapper {
     display: flex;
     justify-content: center;
     flex-direction: column;
-    height: 100%;
+    height: @testimonialAvatarWrapperHeight;
   }
 
   .content .title {
-    margin: 0 2rem;
-    font-weight: 500;
-    font-size: 36px;
-    line-height: 150%;
-    letter-spacing: -0.015em;
-    color: #3d5265;
+    margin: @testimonialContentTitleMarginVertical @testimonialContentTitleMarginHorizontal;
+    font-weight: @testimonialContentTitleFontWeight;
+    font-size: @testimonialContentTitleFontSize;    
+    letter-spacing: @testimonialContentTitleLetterSpacing;
+    color: @testimonialContentTitleColor;
   }
 }
diff --git a/theme/themes/eea/extras/testimonial.variables b/theme/themes/eea/extras/testimonial.variables
@@ -0,0 +1,13 @@
+/*******************************
+            Testimonial
+*******************************/
+
+
+@testimonialWidth                           : 100%;
+@testimonialAvatarWrapperHeight             : 100%;
+@testimonialContentTitleMarginVertical      : 0;
+@testimonialContentTitleMarginHorizontal    : 2rem;
+@testimonialContentTitleFontWeight          : 500;
+@testimonialContentTitleFontSize            : 36px;
+@testimonialContentTitleLetterSpacing       : -0.015em;
+@testimonialContentTitleColor               : @deepBlue;